vue3组合式api子组件怎么监听父组件的值
时间: 2023-09-15 19:21:52 浏览: 43
在Vue3中,使用`setup()`函数来定义组件的逻辑,可以使用`ref`、`reactive`等API来创建响应式数据。如果想要子组件监听父组件的值,可以通过`props`来实现。
首先,在父组件中定义一个响应式数据,并通过`prop`传递给子组件:
```vue
<template>
<div>
<ChildComponent :value="parentValue"/>
</div>
</template>
<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
setup() {
const parentValue = ref('hello')
return {
parentValue
}
}
}
</script>
```
然后,在子组件中接收`value`,并使用`watch`监听父组件传递的值的变化:
```vue
<template>
<div>{{ value }}</div>
</template>
<script>
import { watch } from 'vue'
export default {
props: {
value: {
type: String,
required: true
}
},
setup(props) {
watch(() => props.value, (newValue, oldValue) => {
console.log(`父组件传递的值从 ${oldValue} 变成 ${newValue}`)
})
}
}
</script>
```
这样,当父组件中的`parentValue`发生变化时,子组件中的`watch`函数就会被调用,可以在其中进行相应的逻辑处理。