vue 怎么点击按钮 实现父组件给子组件传值,子组件怎么监听变化
时间: 2023-08-18 10:23:00 浏览: 87
vue父组件异步获取数据传给子组件的方法
在 Vue 中,父组件向子组件传递数据可以使用 props 属性进行传递,子组件监听 props 属性的变化可以使用 watch 监听器或计算属性来实现。
假设父组件中有一个按钮,点击按钮可以改变 message 的值,并将该值传递给子组件,子组件需要监听该值的变化。可以按照以下步骤进行操作:
1. 在父组件中,定义一个 message 属性,并将该属性通过 props 属性传递给子组件,例如:
```
<template>
<div>
<child-component :message="parentMessage"></child-component>
<button @click="changeMessage">改变消息</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '父组件的消息'
}
},
methods: {
changeMessage() {
this.parentMessage = '改变后的消息'
}
}
}
</script>
```
2. 在子组件中,通过 props 属性声明接收父组件传递过来的数据,并使用 watch 监听器监听该数据的变化,例如:
```
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
},
watch: {
message: function(newValue, oldValue) {
console.log('message 发生变化:', newValue, oldValue)
}
}
}
</script>
```
这样,当你在父组件中点击按钮改变消息时,子组件中的消息也会随之更新,并且监听器会输出变化后的值和变化前的值。需要注意的是,监听器中的 this 指向的是子组件实例,而不是父组件实例。如果需要在子组件中修改父组件传递过来的数据,应该使用 $emit 方法触发父组件的事件来实现。
阅读全文