中间事件管理器
2019-12-03 本文已影响0人
未来在奋斗
<body>
<!--
中间事件管理器，其实就是一个发布订阅者模式。在 vue 中我们可以通过实例化一个空的vue实例对象来操作
1. const bus = new Vue()
2. A -> B 先在 B 组件中通过 bus.$on() 来监听一个自定义事件
3. A -> B 在 A 组件的某个时刻通过 bus.$emit() 来触发自定义事件
-->
<div id="app" v-cloak>
<parent></parent>
<hr>
<hello></hello>
<world></world>
</div>
<script src="./js/vue.js"></script>
<script>
//创建一个空实例 做中间代理
const bus = new Vue()
Vue.component('hello', {
template: `
<div>
<p>hello</p>
<button @click="fn1">带我，修改world组件的名字为李四丰</button>
</div>
`,
methods: {
fn1 () {
// 触发（发布）一个事件
//bus空实例,$emit触发事件 changName事件名字 , 第二个参数是要传递的数据
bus.$emit('changName','李四丰')
}
}
})
Vue.component('world', {
data () {
return {
name: '李四'
}
},
template: `
<div>
<p>world</p>
{{ name }}
</div>
`,
created () {//只有在生命周期函数中才能起一个没有条件的监听
// 监听（订阅）一个事件
//假实例下监听changeName事件,拿到新的数据将其赋值
bus.$on('changeName',(newName) =>{
this.name = newName
})
}
})
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
