父子组件之间可以通过事件和 props 进行通信，但通常是单向的：父组件向子组件传递数据（props），子组件向父组件发送事件（$emit）。
方式
-
父组件传递数据给子组件:
- 使用
props。
- 使用
-
子组件通知父组件:
- 使用
$emit发送事件。
- 使用
示例
-
父组件:
Vue.component('parent', {data() {return {message: 'Hello from Parent!'};},template: `<child @child-event="handleChildEvent" :message="message"></child>`,methods: {handleChildEvent(data) {console.log(data); // 处理子组件传来的数据}} }); -
子组件:
Vue.component('child', {props: ['message'],template: `<div><p>{{ message }}</p><button @click="notifyParent">Notify Parent</button></div>`,methods: {notifyParent() {this.$emit('child-event', 'Message from Child!');}} });
下面是一个简单的 Vue.js 示例，展示父子组件之间的交互：
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>父子组件示例</title>
</head>
<body><div id="app"><parent-component></parent-component>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>// 子组件Vue.component('child-component', {props: ['message'],template: `<div><p>子组件消息: {{ message }}</p><button @click="notifyParent">通知父组件</button></div>`,methods: {notifyParent() {this.$emit('child-event', '来自子组件的消息！');}}});// 父组件Vue.component('parent-component', {data() {return {parentMessage: '来自父组件的消息！'};},template: `<div><h1>父组件</h1><child-component :message="parentMessage" @child-event="handleChildEvent"></child-component></div>`,methods: {handleChildEvent(data) {alert(data); // 弹出子组件发送的消息}}});// 创建 Vue 实例new Vue({el: '#app'});
</script></body>
</html>
功能说明
- 父组件: 显示一条消息，并将其传递给子组件。
- 子组件: 接收父组件的消息，并提供一个按钮，点击后通过
$emit触发事件，将消息传回父组件。 - 事件处理: 父组件处理子组件的事件，弹出一个提示框显示消息。