vue监听子组件中的变量
时间: 2023-08-09 18:05:34 浏览: 57
在 Vue 中,可以通过 `props` 向子组件传递数据,并使用 `watch` 监听子组件中的变量。
首先,在父组件中定义一个变量,并通过 `props` 传递给子组件:
```html
<!-- 父组件 -->
<template>
<div>
<child-component :child-variable="parentVariable"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
parentVariable: 'Hello World'
}
}
}
</script>
```
然后,在子组件中,可以使用 `props` 定义接收父组件传递的变量,然后使用 `watch` 监听该变量的变化:
```html
<!-- 子组件 -->
<template>
<div>
<p>{{ childVariable }}</p>
</div>
</template>
<script>
export default {
props: ['childVariable'],
watch: {
childVariable(newValue, oldValue) {
console.log('childVariable 变化了:', newValue, oldValue)
}
}
}
</script>
```
这样,当父组件中的 `parentVariable` 发生变化时,子组件中的 `childVariable` 也会相应地发生变化,并触发 `watch` 监听函数。