$Vue传值方案$

## 目录结构

$写法一$

eventBus/index

import Vue from "vue";
export const eventBus = new vue();

page.vue

<div>子组件:<Children></Children></div>
<button @click="toMsg">点击</button>

import Children from './Children.vue';
import { eventBus } from './eventBus/index';

toMsg(){
    eventBus.$emit('Msg','父组件传的值');
  }

Children.vue

import {eventBus} from './eventBus/index.js';
export default {
  data() {
    return {
        msg:''
    };
  },
  mounted() {
      eventBus.$on('Msg',msg=>{
          this.msg += msg;
      })
  },
  beforeDestroy(){
    eventBus.$off("Msg")
  }
  
};

$写法二$

注册到main.js

Vue.prototype.$EventBus = new Vue();

使用

<div>子组件:<Children></Children></div>
<button @click="toMsg">点击</button>

import Children from './Children.vue';

toMsg(){
    this.$eventBus.$emit('Msg','父组件传的值');
  }

mounted () {
    this.$EventBus.$on("Msg", (data) => {
    
    });
  },
  destroyed() {
    this.$EventBus.$off()
  }