vue2 父子组件通信
时间: 2023-10-20 17:08:28 浏览: 62
在 Vue 2 中,父子组件之间的通信可以通过 Props 和事件来实现。
1. 使用 Props:父组件可以通过 Props 将数据传递给子组件。在父组件中定义一个属性,并将其绑定到子组件上,子组件可以直接访问和使用这些属性。
父组件:
```html
<template>
<div>
<child-component :message="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello from parent'
};
}
};
</script>
```
子组件:
```html
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
```
2. 使用事件:子组件可以通过触发事件的方式将数据传递给父组件。在子组件中使用 $emit 方法触发一个自定义的事件,并将需要传递的数据作为参数。
父组件:
```html
<template>
<div>
<child-component @message-updated="updateMessage"></child-component>
<p>{{ message }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
};
},
methods: {
updateMessage(message) {
this.message = message;
}
}
};
</script>
```
子组件:
```html
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-updated', 'Hello from child');
}
}
};
</script>
```
这样,父组件就能够接收到子组件发送的数据,并进行相应的处理。通过 Props 和事件的组合使用,可以实现灵活的父子组件通信。