子组件watch父组件
时间: 2023-11-08 12:04:34 浏览: 28
在Vue中,子组件可以通过watch选项来监听父组件传递的数据的变化。当父组件的数据发生变化时,子组件会触发相应的回调函数。
以下是一个示例,展示了子组件如何watch父组件的数据变化:
```javascript
// 父组件
<template>
<div>
<input v-model="message">
<child-component :data="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
};
}
}
</script>
// 子组件
<template>
<div>
<p>父组件传递的数据: {{ data }}</p>
</div>
</template>
<script>
export default {
props: ['data'],
watch: {
data(newValue, oldValue) {
// 在这里处理数据变化的逻辑
console.log('父组件的数据发生变化');
}
}
}
</script>
```
在上面的代码中,父组件中的message数据通过props属性传递给了子组件。在子组件中,通过watch选项监听这个props属性。当父组件中的message数据发生变化时,子组件会触发watch中的回调函数,并进行相应的处理。