在 Vue 中，使用 $emit 实现子组件向父组件传值的过程如下：
- 在子组件中通过
$emit方法触发一个自定义事件，并传递数据作为参数。 - 在父组件的模板中监听该自定义事件，并指定一个处理函数。
- 当子组件触发
$emit方法时，父组件会捕获到该事件，并执行相应的处理函数，同时可以接收子组件传递过来的数据。
示例一：$emit + Vue.component
在这个示例中，父组件通过全局注册一个子组件 ChildComponent，监听子组件触发的 child-event 事件，并在父组件中定义处理方法 handleChildEvent。子组件通过按钮点击事件，使用 $emit 向父组件发送了一个名为 child-event 的自定义事件，并传递了 message 数据。父组件监听到 child-event 事件后，调用 handleChildEvent 方法将接收到的 message 数据赋值给 messageFromChild，最终在父组件模板中展示出来。
<body>
<div id="app">
<ChildComponent @child-event="handleChildEvent" />
<p>Received data from child: {{ messageFromChild }}</p>
</div>
<script>
// 全局注册子组件 ChildComponent
Vue.component('ChildComponent', {
template: '<button @click="sendDataToParent">传值给父组件</button>',
data() {
return { message: '我是子组件中的数据' }
},
methods: {
sendDataToParent() {
this.$emit('child-event', message);
}
}
});
// 创建 Vue 实例
new Vue({
el: '#app',
data: {
messageFromChild: ''
},
methods: {
handleChildEvent(message) {
this.messageFromChild = message;
}
}
});
</script>
</body>
示例二：$emit + v-on
在这个示例中，父组件 ParentComponent 中包含一个按钮，点击按钮会触发 sendDataToChild 方法，该方法会更新 messageToChild 数据。然后，messageToChild 作为 prop 传递给子组件 ChildComponent。子组件 ChildComponent 中使用 props 接收父组件传递的数据，并在模板中展示出来。
- 子组件 ChildComponent.vue
<template>
<div>
<p>{{ messageFromParent }}</p>
</div>
</template>
<script>
export default {
props: ['messageFromParent']
};
</script>
- 父组件 ParentComponent.vue
<template>
<div>
<button @click="sendDataToChild">向子组件传值</button>
<ChildComponent v-on:messageFromParent="messageToChild" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
messageToChild: 'Hello Child!'
};
},
methods: {
sendDataToChild() {
this.messageToChild = 'Hello Child! I am your parent.';
}
}
};
</script>
