步骤:
- 创建一个空Vue实例,也就是一个 bus ( 事件总线 )
- 一个组件注册事件( bus.$on(事件名称, () => {}) )
- 另一个组件触发事件( bus.$emit(事件名称, 数据) )
- 注意:一定要是同一个 bus!!!
<div id="app">
<jack></jack>
<rose></rose>
</div>
<script src="./vue.js"></script>
<script>
// 创建一个bus
const bus = new Vue()
Vue.component('jack', {
template: `
<div>
我是jack,我要对 rose 说:
<button @click="fn">告诉rose:i love u</button>
</div>
`,
methods: {
fn() {
// 触发事件
// 第一个参数表示:事件名称,需要与 注册事件 名称一致
// 第二个参数表示:要传递的数据
bus.$emit('love', 'i love u')
}
}
})
Vue.component('rose', {
template: `
<div>
我是rose,jack 对我说:{{ msg }}
</div>
`,
data() {
return {
msg: ''
}
},
created() {
// 注册事件
// 第一个参数表示:事件名称
// 第二个参数表示:事件处理程序
bus.$on('love', (data) => {
console.log('rose 接收到 jack 传递过来的数据:', data)
this.msg = data
})
}
})
const vm = new Vue({
el: '#app',
data: {
}
})
</script>