vue子组件动态监听父组件的值改变

在VUE设计里父组件传递子组件用到props

设计场景： 父组件的值改变，子组件通过父组件改变的值进行逻辑判断操作。

解决思路： 1、因为存在子组件要更改父组件传递过来的数据，但是直接操作props里定义的数据vue会报错，所以需要在data里重新定义属性名并将props里的数据接收。 2、首先想到的肯定是在computed计算属性里监听数据的变化，那就直接在computed里监听父组件传递过来的props数据的变化，如果有变动就进行操作

实现方式： export default { name: 'SwitchButton', props: { status: { type: Boolean, default () { return false } } }, data () { return { switchStatusData: this.status // 重新定义数据 } }, computed: { switchStatus: function () { return this.status // 直接监听props里的status状态 } } } }