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