vue-组件通信

vue

发布日期: 2021-02-10

文章字数: 228

阅读时长: 1 分

1. 父传子

v-bind:data = "data"

props:{
    data:Object,
}

2. 子传父

this.$emit('send',data);

<div v-on:send = "sendData"></div>

3. 兄弟通信

3.1 Vue事件总线（EventBus）

原理是通过一个新的Vue实例，使用 $on 和 $emit 方法通信

(1) 初始化

可以定义一个文件

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

或者是主文件

// main.js
Vue.prototype.$EventBus = new Vue()

(2) 发送事件

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

(3) 接收事件

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>