vue 组件：非父子间传值（同级传值）

作者: 闫梓璇 | 来源:发表于2018-09-22 10:18 被阅读0次

非父子间传值声明一个第三方量来传值
效果图：

未点击：

QQ截图20180922101550.png
点击后：

QQ截图20180922101634.png

body:

<div id='app'>
   <child></child>
   <son></son>
</div>

js:

<script>
  //第三方量bus
   var bus=new Vue() 
    //第一个组件
   Vue.component('child',{
       template:`
          <div>
             <h1>这是组件A</h1>
             <button @click='sendMsg'>点击按钮传值</button>
          </div>
       `,
       data:function(){
           return{
               msg:'非父子组件传值'
           }
       },
       methods:{
           sendMsg:function(){
              bus.$emit('send',this.msg)
           }
       }
   }) 
    //第二个组件
  Vue.component('son',{
      template:`
         <div>
             <h1>这是组件B</h1>
             <a href="#">{{mess}}</a>
          </div>
      `,
      data:function(){
          return{
              mess:''
          }
      },
      mounted:function(){
         bus.$on('send',msg=>{
             console.log(this);
             this.mess=msg;
         }) 
      }
      
  })  
   
    
  new Vue({
      el:'#app'
  })
</script>