vue中非父子组件的传值bus的使用

时间 2020-05-21

标签 vue 中非父子组件 bus 使用繁體版

原文原文链接

非父子之间的组件传值，能够使用vuex。简单的状态管理，也能够用vue bushtml

vue bus能够实现不一样组件间、不一样页面间的通讯，好比我在A页面出发点击事件，要B页面发生变化，使用方法以下：vue

全局定义：main.jsvuex

window.eventBus = new Vue()

在A页面的事件中触发：

eventBus.$emit('todo', '123')

在B页面的created中开始监听，越早监听越好：

eventBus.$on('todo', (params) => {

console.log(params)

})

下面我来一个例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件传值（bus/总线/发布订阅模式/观察者模式）</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script> Vue.prototype.bus = new Vue(); Vue.component('child',{ data:function(){ return { selfContent:this.content } }, props:{ content:String }, template:'<div @click="handleClick">{{selfContent}}</div>', methods:{ handleClick:function(){ //因为bus是vue的一个实例，因此它有$emit这个方法,change就是一个随意的名字，能够改为aaa
                this.bus.$emit('change',this.selfContent) } }, mounted:function(){ var this_= this; this.bus.$on("change",function(msg){ this_.selfContent=msg; }) } }) var vm= new Vue({ el:'#app', data:{}, methods:{ }, }) </script>
</body>
</html>

固然也能够参考一些其余人的博客，注意理解app

https://www.jianshu.com/p/5b383e66c117 this

http://www.cnblogs.com/fanlinqiang/p/7756566.htmlspa