美文网首页
组件:非父子间传值(同级传值)

组件:非父子间传值(同级传值)

作者: 辞苏 | 来源:发表于2018-09-23 19:26 被阅读0次

    非父子间传值声明一个第三方量来传值
    点击前后:



    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>
    

    相关文章

      网友评论

          本文标题:组件:非父子间传值(同级传值)

          本文链接:https://www.haomeiwen.com/subject/nkeqoftx.html