vue子组件监听props变化
时间: 2023-08-31 10:05:20 浏览: 62
在Vue中,子组件可以通过监听props变化来实现响应式更新。具体的做法是在子组件中使用`watch`属性来监听父组件传递下来的props值的变化。当props值发生变化时,子组件就会自动更新。
下面是一个示例代码,演示了如何在子组件中监听props变化:
```html
<!-- 父组件模板 -->
<template>
<div>
<my-component :propA="valueA"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
},
data() {
return {
valueA: 'foo'
}
},
methods: {
changeValue() {
this.valueA = 'bar'
}
}
}
</script>
```
```html
<!-- 子组件模板 -->
<template>
<div>
<p>Prop A: {{ propA }}</p>
</div>
</template>
<script>
export default {
props: {
propA: String
},
watch: {
propA(newVal, oldVal) {
console.log(`Prop A changed from ${oldVal} to ${newVal}`)
}
}
}
</script>
```
在上面的例子中,父组件传递了一个值为`foo`的propA给子组件MyComponent。当父组件中的`changeValue`方法被调用时,valueA的值会更新为`bar`。由于子组件中监听了propA的变化,因此当propA的值发生变化时,控制台会输出相应的信息。
需要注意的是,如果props是一个对象或数组类型,那么在watch中监听它的变化时,应该使用深度监听(即`deep: true`),这样才能确保监听到对象或数组中元素的变化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)