vue系列【兄弟组件之间实现传值】

第一步：创建一个js文件 导出vue实例vueEvent

src/vueEvent.js

// 第一步：引入个空的vue实例
import Vue from 'vue'
// 第二步：实例化这个空的vue
var vueEvent = new Vue();
// 第三步：将它暴露出去
export default vueEvent;

第二步：在第一个子组件中进行广播，使用vueEvent.$emit('自定义事件'，'传递的数据')

src/view/child1.vue

<template>
  <div>
    <input type="text" placeholder="我是张三" @click="run()">
  </div>
</template>
​
<script>
import vueEvent from "@/vueEvent.js"
export default {
    data(){
        return{
            exportData:"要传给兄弟的数据"
        }
    },
    methods:{
        run(){
            vueEvent.$emit('tochilds',this.exportData)
        }
    }
​
}
</script>
​
<style>
​
</style>

第三步：在第二个组件接收，使用vueEvent.$on('第一个组件传递过来的自定义事件')

src/view/child2.vue

<template>
  <div>
      <p>{{demodata}}</p>
      <p>我兄弟张三给我的数据是：{{getdara}}</p>
  </div>
</template>
​
<script>
import vueEvent from "@/vueEvent.js"
export default {
    data(){
        return{
            demodata:"我是张三兄弟王五",
            getdara:"",
        }
    },
    mounted(){
        vueEvent.$on('tochilds',function(val){
            console.log(val,'传过来的数据');
            this.getdara = val
            console.log(this.getdara,"this.getdara");
        })
    }
​
}
</script>
​
<style>
​
</style>