组件非父子之间传值

作者: 执念_6afc | 来源:发表于2018-09-23 19:47 被阅读0次

组件之间的传值
vue 组件之间传值方法
2018-09-25组件
组件通信
非父子组件之间的传值
vue 6种通信总结①
与Vue.js的第八天
2018-09-23 js.vye 组件--续
22.父子组件之间传值示例
组件非父子之间传值

非父子组件之间的通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
       <div id='app'>
            <child></child>
            <son></son>
        </div>
        <script src='js/vue.js'></script>
        <script>
              var bus=new Vue();
               Vue.component('child',{
                          template:`
                                <div>
                                      <h2>我是child组件</h2>
                                      <button @click='sendMsg'>发送数据</button>
                                  </div>
                          `,
                           data:function(){
                                return{
                                      msg:'我是child组件中的数据，要传给son组件'
                           }
                            methods:{
                                  sendMsg:function(){
                                        bus.$emit('send',this.msg)
                                  }
                            }

                            }
                })
            

  Vue.component('son',{//b
          template:`
           <div>
                <h2>我是son组件</h2>
                <a>{{mess}}</a>
           </div>
         `,
          data:function(){
             return{
                 mess:''
             }
          },
          mounted:function(){
            bus.$on('send',msg=>{
                console.log(this);
                this.mess=msg
            })  
          
          }
      
      
      })
    
</body>
</html>