vue项目中子组件watch不到父组件传递的props变化

一、现象

父组件中引入了一个弹框组件，并传递props——columnField。子组件中watch该props的变化，并执行相应操作。代码如下

父组件

子组件

当父组件中执行openSetFieldDialog方法时，columnField的值发生了变化，但子子组件并没有监听到。

二、原因

我在父组件的data中定义columnField时，只赋值了一个空对象，没有添加alias和description属性。

data(){
    return{
        columnField:{}
    }
}

当给columnField的alias和description属性直接赋值时，这两个属性并不是响应式的，所以子组件中watch不到columnField的变化。

三、解决方案

1、定义columnField的同时定义属性

data(){
    return{
        columnField:{
            alias:'',
            description:''
        }
    }
}

2、使用vue.set添加属性，保证属性是响应式的

openSetFieldDialog(element){
    this.curColumn = element;
    this.setFieldDialog = true;
    Vue.set(this.columnField,'alias',element.alias);
    Vue.set(this.columnField,'description',element.description);
}

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_26834399/article/details/90450616
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-26 17:10:20
阅读 ( 879 )
分类：前端

vue项目中子组件watch不到父组件传递的props变化

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看