组件中的非父子传值

代码如下：

        <div id='app'>
           <child></child>
       <son></son>
       </div>
    <script src='vue.js'></script>
    <script>
     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>

效果图：

f7b7539f-67c9-4f9a-81a7-07e47e7a1b9c.png

点击按钮之后把组件A定义的内容传给组件B

95ffa541-ab55-4e0b-8978-2310561490bb.png