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

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



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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 非父子间传值声明一个第三方量来传值效果图: 未点击: 点击后: body: js:
    闫梓璇阅读 3,523评论 0 0
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,106评论 1 12
  • 文/墨林 生命即将过完19年,现在的我,在别人看来,也许还算光鲜。读书,写作,学习,骑行,假期一个人说走就走的旅行...
    远行孤帆阅读 4,565评论 0 3
  • 感恩大自然的恩赐,谢谢你 感恩业力伙伴的支持,谢谢你。 感恩父母的养育,谢谢你。 感恩婆婆的照顾,谢谢。 感恩钱宝...
    莫水娥阅读 1,267评论 0 1
  • 水源中小学,一个令我魂牵梦萦的地方,她是梦想开始的地方,是青春张扬的地方,是遇见最纯粹友情的地方。日渐久远记...
    简兮5165878阅读 1,553评论 0 0