点击父组件按钮，动态向子组件模态框传值，程序中大量使用watch是否会影响程序性能？或者有其它的办法替代watch？

Question

问题描述

大致意思：表格是父组件，模态框是子组件，点击父组件表格的操作按钮，需要把当前点击的这一条数据传给模态框显示，使用了props传值，因为子组件的data只初始化了一次props的值，当点击父组件按钮的时候，props的值并没有动态的更新到子组件data上，使用了watch解决，因为程序中已经使用了大量的watch，wacth过多是否会影响程序性能，请问还有没有更好的解决办法

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

// 父组件传值

"a", {
    style: {
        marginRight: "8px"
    },
    on: {
    click: () => {
        this.modalShow = true;            // 点击按钮 模态框打开 true
        this.instanceInfo = params.row;  // 点击按钮动态传给子组件模态框的值
        }
    }
},
"续费"

// 子组件接收

// modalShow 为true或者false  判断模态框是否打开了
// instanceInfo是我需要的动态的值
props: ['modalShow', 'instanceInfo'],
data() {
    return {
        xuFeiTableData: []   // 接收父组件动态传过来的值instanceInfo
    };
},
watch: {
    // 监听模态框是否打开了 打开了则把props传过来的当前实例属性的值给xuFeiTableData
    modalShow: function (newValue, oldValue){
        this.xuFeiTableData = [];
        if(newValue == true){
            this.xuFeiTableData.push(this.instanceInfo);  
        }
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

更好的解决子组件 动态取到父组件的值？

Answer 1

因为子组件的data只初始化了一次props的值 ? porps 本身就是动态更新的

绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：