vue用公共组件页面传值_使用全局 bus 在 Vue 的兄弟组件中简单传值（以及 this 重定向的 5 种方法）...

总线传值有两种写法：原型bus写法【 window.Vue.prototype.bus = new Vue() 】、全局bus写法【 window.bus=new Vue() 】。

如果使用了原型写法，那在组件里面必须使用 this.bus.$emit() 发送消息，以及使用 this.bus.$on() 接收消息。它们全部要用 this 开头。如果使用了全局写法，则可以简化为 bus.$emit() 及 bus.$on() 了。

在确保全局bus不会发生变量名称冲突的前提下，使用全局bus的写法要更简单一些。首先，修改 resources\assets\js\app.js 文件引入全局bus

require('./bootstrap');

window.Vue = require('vue');

window.bus=new Vue(); //全局bus

// window.Vue.prototype.bus = new Vue(); //原型bus

import ...

const app = new Vue({

el: '#app',

components:{

...

},

});

这里需要注意的是window.bus=new Vue() 这行代码的位置有讲究，不能把它放在 const app=new Vue({...}); 之后。

在blade模板中，以下两个Vue组件是同级关系

组件1的作用：

1、接收数据库查询到的复杂对象 $ca