兄弟组件传值（草稿）_获取兄弟组件的变量-CSDN博客

本文链接：https://blog.csdn.net/from_shanghai/article/details/99690980

<!-- vue兄弟组件间传值

借助中央事件总线

1：在外部建一个Bus.js，放在 assets文件夹下

Bus.js:
import Vue from 'Vue';
//平常写都是 import Vue from 'vue'

export default new Vue;
//创建空的Bus 组件
//vue-music App.vue 是
export default {
components:{
组件名
}
}

2.两个组件作为子组件被同一个父组件所引用，在同一个页面显示
这个是父组件:

import b1 from './b1.vue'

import b2 from './b2.vue'

components:{
b1,
b2
}

3.两个兄弟组件间的语法：

组件1 就当是组件b1

b1 定义一个发送数据的方法，

<button @click="sendMsg">向组件传值</button>

methods：{
sendMsg(){
Bus.$emit('send', this.a++)
}
}

点击触发 sendMsg 函数，函数主体，通过 Bus中央事件总线用$emit发送一个send事件没错，是 send 事件
sendMsg 是点击事件 send是发送出去，需要其他组件监听的事件

4.组件2 就当是组件b2

组件2 在 data(){} 中定义一个变量这个变量来接收 b1传过来的值（this.a++ 得到的值）

在created 生命周期中，通过 Bus中央事件总线用$on监听组件1 中发送的send事件，用一个带参数的回调函数，接收
传过来的值，参数就是传的值，把值赋给当前组件的变量

data(){
   return(){
   msg:"初始值"
   }
},
created(){
   var self=this
   Bus.$on('send', function(val) {
   self.msg = val;
})
}

别忘了在 b1、b2 中引入 bus.js
import Bus from './bus.js'

//组件可以导入 js，( 不过导入的方式…… 要给js 文件起别名吗 )
js 也可以导入组件（看第一步中 bus.js）

总结：
通常 index.html 只有
<body><div id="app"></div></body>( 自动生成，不用写什么)
main.js 中有#app 的 vue实例
new Vue({
   el:'#app',
   router,
   render:h=>h(App)
})
new Vue({}) 里这三项是肯定的
再一项项分析
先分析 App.vue
它是整个h5的布局
vue-cms 分三部分，而 vue-music 分四部分
言归正传还是讲 vue-music
vue-music 需要切换的就是 <router-view>
再是讲 router