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

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

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

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

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

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

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

方法1:

1、因为存在子组件要更改父组件传递过来的数据，但是直接操作小道具里定义的数据某视频剪辑软件会报错，所以需要在数据里重新定义属性名并将小道具里的数据接收。

2、首先想到的肯定是在计算计算属性里监听数据的变化，那就直接在计算里监听父组件传递过来的小道具数据的变化，如果有变动就进行操作，如：

导出默认值{ name: 'SwitchButton '，prop : { status : { type : Boolean，default () { return false } }，data(){ return { Switch status data : this。状态/重新定义数据} }，计算出： { switch status 3360 function(){返回此。状态/直接监听小道具里的状态状态} } }}这样就可以在使用开关状态的地方动态的监听到父组件状态的变化。似乎只针对简单的数据类型有效。

方法2:

使用看和计算组合实现：如

导出默认值{ name: 'SwitchButton '，prop : { status : { type :布尔值，default () { return false } }，data(){ return { SwitChStatusdTa : this。status } }，计算出： { SwitchStatus 3360函数(){返回此。switch statusdata//监听开关状态数据的变化} }，watch: { status (newV，oldV) { //watch监听小道具里状态的变化，然后执行操作console.log(newV，oldV)这个。switch statusdata=NewV } }，方法： { switch handleclick(){ this。switch statusdata=！this.switchStatusData this .$emit('switchHandleClick '，this.switchStatusData) } }}下面是实现该组件的代码：

模板span class=' switch-bar ' : class=' { ' active ' : switch status } ' @ click=' switch handleclick ' span class=' switch-BTN '/span/span/template script export default { name : ' switch button }，prop 3360 { status 3360 { type : Boolean，default () { return false } }，data(){ return { switch status data 3360 this。状态} }，已计算： {开关状态3360此.开关状态此数据.$emit('switchHandleClick '，这。switch statusdata)} } }/脚本样式lang=“手写笔”作用域为@ import‘~ style/variables。styl .面积-包装线-高度：8雷姆；划水： 0 . 4毫米.向右切换浮子：font-size : 0；开关杆相对位置：显示器：内联块；宽度：8雷姆；高度：四毫米；边界半径：4 re背景# dddborder: 2px实心# ddd垂直对齐： 中间；过渡：背景。3s，边框。3s；活动背景：美元bgColorborder: 2px纯色$ bgColor .开关-BTN左转：4雷姆；背景# fff .开关btn位置：绝对；left: 0pxdisplay:内联块；宽度：四毫米；高度：四毫米；边界半径：2雷姆；背景# fff中天：背景。3s，左。3s；/style以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。