写一个完整的组件之间通信代码
时间: 2024-06-03 16:10:54 浏览: 12
好的,以下是一个简单的组件之间通信的示例代码:
// 定义一个事件总线
const eventBus = new Vue()
// 组件1
const component1 = {
template: `
<div>
<h1>Component 1</h1>
<button @click="emitMessage">发送消息给 Component 2</button>
</div>
`,
methods: {
emitMessage() {
// 发送消息
eventBus.$emit('custom-event', 'Hello, Component 2!')
}
}
}
// 组件2
const component2 = {
template: `
<div>
<h1>Component 2</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: ''
}
},
mounted() {
// 监听消息
eventBus.$on('custom-event', message => {
this.message = message
})
}
}
// 父组件
const parentComponent = {
components: {
component1,
component2
},
template: `
<div>
<component1 />
<component2 />
</div>
`
}
// 实例化应用
new Vue({
el: '#app',
components: {
parentComponent
},
template: `
<div>
<parent-component />
</div>
`
})
在这个示例中,我们使用了一个事件总线来让两个组件进行通信。组件1通过事件总线发送消息,而组件2监听相同的事件并接收消息。
请注意,这只是一个简单的示例代码,实际应用中可能需要更复杂的实现方式和更严谨的逻辑处理。