Vue 組件之間的通信,通常我們遇到的都是父子組件之間的通信
一唬涧、父子組件傳參
- 子組件定義 Props 屬性疫赎;
- 父組件再引用的子組件上綁定上相應(yīng)的屬性,子組件即可捕獲父組件傳遞到自組件的值爵卒;
// 子組件(child.vue)
<template>
<div>小灰的父親讓他去買 {{ product }} </div>
</template>
<script>
export default {
props: {
product: {
required: [true | false],
type: [String | Number | Object | Boolean];
default: [value | Function],
validator: Function
}
}
}
</script>
二虚缎、兄弟組件傳參
方法一:EventBus
// eventBus.js
import Vue from 'vue';
export default new Vue();
方法二:Vue全局事件監(jiān)聽
// main.js 定義
Vue.prototype.$vm = new Vue();
// 組建中使用
this.vm.$emit(fun, data) // 事件觸發(fā)
this.vm.$on(fun, (data) => {}) // 事件監(jiān)聽