在Vue中，props是父组件传递给子组件的数据，子组件无法直接对props进行监视（watch）

来源：恒创科技编辑：恒创科技编辑部

2024-02-22 14:05:50

在Vue中，props是父组件传递给子组件的数据，子组件无法直接对props进行监视（watch）。但是可以通过在子组件中使用computed属性来实现对props的监视。

例如，假设父组件传递了一个名为myProp的props给子组件，我们可以在子组件中使用computed属性来监视myProp的变化：

exportdefault{
props:['myProp'],
computed:{
myPropWatcher(){
returnthis.myProp;
}
},
watch:{
myPropWatcher(newVal,oldVal){
//处理myProp的变化
}
}
}

通过将myProp映射到computed属性myPropWatcher，我们可以实现对myProp的监视，一旦myProp发生变化，watcher会自动触发。

另外，如果你想要在子组件中监视多个props，可以使用对象的方式进行监视：

watch:{
'myProp1':function(newVal,oldVal){
//处理myProp1的变化
},
'myProp2':function(newVal,oldVal){
//处理myProp2的变化
}
}

这样就可以实现对多个props的监视。希望能帮助到你。

本文地址：https://www.henghost.com/jishu/28213/