文章目录
前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、Bus
示例：Bus的总线机制，将事件挂载到vue的的属性上
二、使用步骤
1.引入库
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bus/总线机制/发布订阅模式/观察者模式</title>
</head>
<body>
<div id="root">
<chlid content="dell"></chlid>
<chlid content="li"></chlid>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
Vue.prototype.bus = new Vue()//把vue上的prototype挂载一个bus的属性指向一个实例
//之后所有的new Vue()定义的事件或组件都会挂载bus这个属性
Vue.component('chlid',{
data:function(){//定义复制一个子组件自己用的content并返回一个对象来解除警报
return{
selfContent:this.content
}
},
props:{
content:String
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick:function(){
this.bus.$emit('change', this.selfContent)//通过bus属性触发传递事件
}
},
mounted:function(){//触发当bus被挂载后的生命周期钩子
var this_ =this//保存this
this.bus.$on('change',function(msg){//监听bus触发的监听事件change，然后进行下一个事件
this_.selfContent = msg//赋值两个一样
})
}
})
var vm = new Vue({
el:"#root",
})
</script>
</body>
</html>
总结
提示：这里对文章进行总结：
1.把vue上的prototype挂载一个bus的属性指向一个实例，之后所有的new Vue()定义的事件或组件都会挂载bus这个属性
2.通过bus属性触发传递事件，$on进行监听完成传值