vue兄弟之间传值 bus中央事件总线

 

创建一个eventVue.js文件

import Vue from 'vue'
export default new Vue

父

<template>
  <div>
    <div>父</div>
    <v-youngerChild></v-youngerChild>
    <v-bigChild></v-bigChild>
  </div>
</template>

<script>
import YoungerChild from './Child'
import BigChild from './BigChild'
export default {
  components:{
    'v-youngerChild':YoungerChild,
    'v-bigChild':BigChild
  }
}
</script>

哥哥

<template>
  <div>
    <div>哥哥</div>
    {{message}}
  </div>
</template>

<script>
import eventVue from '../assets/js/eventVue.js'
export default {
  data(){
    return{
      message:'哥哥'
    }
  },
  created(){
    eventVue.$on("myFun",(message)=>{
      this.message=message
    })
  }
}
</script>

弟弟

<template>
  <div>
    <div>弟弟</div>
    <button @click="abtn">点击</button>
  </div>
</template>
<script>
import eventVue from '../assets/js/eventVue.js'
export default {
  data(){
    return{
      msg:'弟弟'
    }
  },
  methods:{
    abtn(){
      eventVue.$emit("myFun",this.msg)
    }
  }
}
</script>

 

转载于:https://www.cnblogs.com/zjx304/p/10681382.html