Vue子组件如何实时获取父组件动态变化的值？

本文共计709个文字，预计阅读时间需要3分钟。

在Vue中，父子组件间通过props方式传递数据，但若希望父组件的一个状态值变化后子组件也能监听到并更新状态，可以通过watch属性来实现。场景是子组件通过props获取父组件传递的数据，并使用watch来监听该数据的变化，从而更新自身状态。

在VUE里父组件给子组件间使用props方式传递数据，但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。

场景：子组件通过props获取父组件传过来的数据，子组件存在操作传过来的数据并且传递给父组件。

比如想实现一个switch开关按钮的公用组件：

1.父组件可以向按钮组件传递默认值。

2.子组件的操作可以改变父组件的数据。

3.父组件修改传递给子组件的值，子组件能动态监听到改变。

比如父组件点击重置，开关组件的状态恢复为关闭状态：

方法1：

1、因为存在子组件要更改父组件传递过来的数据，但是直接操作props里定义的数据vue会报错，所以需要在data里重新定义属性名并将props里的数据接收。