兄弟组件传值

兄弟组件传值

创建3个文件
1：bus，公交JS文件
2：哥哥组件
3：弟弟组件

bus.js代码

import Vue from 'vue'

export default new Vue()

哥哥组件代码：

<template>
 <div id="gege">
 <top title="兄弟组件"></top>
  <p>这里是哥哥组件</p>
  <p>这个是哥哥的数据----{{txt}}</p>
  <button @click="btn()" class="btn">发送数据</button>
  <didi></didi>
 </div>
</template>

<script>
import bus from '../bus.js'
import didi from './didi.vue'
export default{
  name:'gege',
  data(){
    return{
      txt:'哥哥的数据内容'
    }
  },
  methods:{
  btn(){
    bus.$emit('data',this.txt)
  }
  },
  components:{didi}
}
</script>

<style>
</style>

弟弟组件代码:

<template>
 <div id="didi">
  <p>这里是弟弟组件</p>
  <p>这个是弟弟的默认数据----{{msg}}</p>
 </div>
</template>

<script>
import bus from '../bus.js'
export default{
  name:'didi',
  data(){
    return{
      msg:'默认值'
    }
  },
   mounted(){
    bus.$on('data',(msg)=>{
      this.msg=msg
      console.log(msg)
    })

  },
}
</script>

<style>
</style>