Vue使用父组件的计算属性监听子组件中的变量
时间: 2023-09-20 10:10:57 浏览: 51
在 Vue 中,可以通过 `computed` 计算属性监听子组件中的变量。与使用 `watch` 监听不同,`computed` 计算属性可以实现响应式更新,只要子组件中的变量发生变化,就会自动更新父组件中的计算属性值。
首先,在父组件中定义一个计算属性,并通过 `props` 传递给子组件:
```html
<!-- 父组件 -->
<template>
<div>
<child-component :child-variable="parentVariable"></child-component>
<p>父组件中的计算属性值:{{ computedVariable }}</p>
</div>
</template>
<script>
export default {
data() {
return {
parentVariable: 'Hello World'
}
},
computed: {
computedVariable() {
// 计算属性中使用子组件的变量
return this.parentVariable.toUpperCase()
}
}
}
</script>
```
然后,在子组件中,可以使用 `props` 定义接收父组件传递的变量:
```html
<!-- 子组件 -->
<template>
<div>
<p>{{ childVariable }}</p>
</div>
</template>
<script>
export default {
props: ['childVariable']
}
</script>
```
这样,当父组件中的 `parentVariable` 发生变化时,子组件中的 `childVariable` 也会相应地发生变化,进而触发父组件中的计算属性 `computedVariable` 更新。
相关推荐
![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)