vue2子组件监听props数据变化代码
时间: 2023-10-26 13:04:57 浏览: 142
vue2.0 子组件改变props值,并向父组件传值的方法
在Vue2中,子组件可以通过`watch`选项来监听`props`数据的变化。下面是一个示例代码:
```vue
<template>
<div>
<p>父组件传递的数据: {{ propData }}</p>
</div>
</template>
<script>
export default {
props: {
propData: {
type: String,
default: ""
}
},
watch: {
propData: function(newVal, oldVal) {
console.log("props数据变化了:", newVal, oldVal);
}
}
};
</script>
```
在这个示例中,子组件通过`watch`选项来监听`propData`的变化。当`propData`的值发生变化时,`watch`函数会被触发,我们在函数中打印出了新旧值,方便调试。
注意,在Vue2中,当`props`数据发生变化时,子组件中的`data`数据并不会同步更新,需要手动通过`watch`选项来监听`props`变化并进行相应的处理。
阅读全文