本文主要是介绍vue组件通讯props和$emit的例子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
当然，我可以为你提供一个使用 Vue 组件通讯的示例，特别是通过 props 和 $emit 的方式。
子组件 (ChildComponent.vue)
vue
<template>
<div>
<button @click="notifyParent">点击我通知父组件</button>
<p>父组件传入的消息是：{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: '没有接收到消息'
}
},
methods: {
notifyParent() {
// 子组件通过 $emit 触发一个自定义事件
this.$emit('child-event', '这是来自子组件的消息');
}
}
}
</script>
父组件 (ParentComponent.vue)
vue
<template>
<div>
<h2>父组件</h2>
<!-- 父组件使用子组件，并通过 :message 传入数据 -->
<ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
<p>子组件发来的消息是：{{ childMessage }}</p>
</div>
</template>
<script>
// 假设 ChildComponent 已经在父组件中注册过了
export default {
data() {
return {
parentMessage: '这是从父组件传来的消息',
childMessage: ''
}
},
methods: {
handleChildEvent(message) {
// 父组件监听子组件的 child-event 事件，并处理消息
this.childMessage = message;
}
}
}
</script>
在这个示例中：
子组件 (ChildComponent) 通过 props 接收来自父组件 (ParentComponent) 的数据 (message)。
子组件中有一个按钮，当点击按钮时，会触发 notifyParent 方法，该方法通过 $emit 发送一个名为 child-event 的自定义事件，并附带一个消息。
父组件 (ParentComponent) 使用子组件时，通过 :message 绑定将数据 (parentMessage) 传递给子组件，并通过 @child-event 监听子组件的 child-event 事件，当该事件触发时，会调用 handleChildEvent 方法处理消息。
这篇关于vue组件通讯props和$emit的例子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
