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

2018-09-23  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读