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); }