Vue兄弟组件之间传递参数笔记

参考很多大佬的自己记一下笔记

1.创建一个js文件eventBus.js

// 导入vue
import Vue from 'vue';
// 导出一个vue实例
export default new Vue();

2.创建兄弟组件Cpn1发射数据

<template>
  <div class="cpn1">
    <h2>{{ message }}</h2>
    <button @click="fsHello">btnClick</button>
  </div>
</template>

<script>
import eventBus from '../assets/js/eventBus';

export default {
  name: 'Cpn1',
  data () {
    return {
      message: 'hello cpn1'
    }
  },
  methods: {
    fsHello () {
      // eventBus.$emit发射事件
      // ('发射的自定义事件名称', '发射的数据')
      eventBus.$emit('fsHello', this.message);
    }
  }
}
</script>

<style>

</style>

3.创建兄弟组件Cpn2接收数据

<template>
  <div class="cpn2">
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
import eventBus from '../assets/js/eventBus';

export default {
  name: 'Cpn2',
  data () {
    return {
      message: '我是组件2'
    }
  },
  created () {
    // eventBus.$on接收事件
    // ('接收自定义事件名称 === 发射自定义事件名称', '接收的数据 === 发射的数据')
    eventBus.$on('fsHello', data => {
      console.log(data);
      this.message = data;
    })
  }
}
</script>

<style>

</style>