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

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

作者: 雨笑_e29c | 来源:发表于2018-09-24 08:48 被阅读0次

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/qcscoftx.html