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

2018-09-24  本文已影响0人  雨笑_e29c

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>


上一篇下一篇

猜你喜欢

热点阅读