组件通讯的方案
- 通过 props 传递 (父子组件传值)
- 通过 $emit 触发 父组件自定义事件
- 父组件使用 ref 访问子组件实例
- EventBus ：需要中间文件，
$emit触发事件，$on监听 - $parent 或者 $root : 可以利用祖先组件搭桥
this.$parent.on('add',this.add)监听事件this.$parent.emit('add')触发事件
- $children
- $attrs 与 $listeners (可以访问未在props接收的属性和方法)
- Provide（祖先提供） 与 Inject （后代注入）
- Vuex
总结：
- 父子： props 与 $emit进行传递，也可选择ref
- 兄弟：
$bus，$parent - 祖先与后代：
$attrs与$listeners或者Provide与 Inject - 复杂关系: vuex存放共享的变量
demo
- 父子： props 与 $emit进行传递，也可选择ref
// parent.vue
<Children ref="child" :msg=msg @handleClick="handleClick"></Children>
// JS部分
<script>
// $refs可以访问子组件的属性和方法
console.log(this.$refs.child.str) // abc
</script>
// Children.vue 只写核心代码，不是完整组件
<template>
<div @click="$emit('handleClick', 'good')">
{{mst}}
<div>
</template>
<script>
props: ['msg', 'handleClick']
data(){return {str: 'abc'}
}
</script>- 兄弟：
$bus，$parent
// evenBus.js
// 方法一：创建一个中央时间总线类
class Bus { constructor() { this.callbacks = {}; // 存放事件的名字 } // 把事件以{fnName: []}存起来$on(fnName, fn) { this.callbacks[fnName] = this.callbacks[fnName] || []; this.callbacks[fnName].push(fn); } // 通过方法名调用$emit(fnName, args) { if (this.callbacks[fnName]) { this.callbacks[fnName].forEach((cb) => cb(args)); } }
} // main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上 // 方法二：Vue已经实现了Bus的功能，可以直接引入使用
import Vue from 'vue'
Vue.prototype.$bus = new Vue()
// 使用----------------------------------------------------------
// Com1.vue 添加事件
this.$bus.$on('foo', this.handle)
// Com2.vue 触发事件
this.$bus.$emit('foo') - 祖先与后代：
$attrs与$listeners或者Provide与 Inject
// parent.vue ---------------------->
<Child foo="foo" @testEvent="testEvent"/> // Child.vue：并未在props中声明foo -------------------->
<p>{{$attrs.foo}}</p>
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson.vue -------------------------------->
<div @click="$emit('testEvent', 'msg from grandson')">
{{foo}}
</div>
// parent.vue ---------------------->
<Child/>
provide(){ return { foo:'foo',testEvent: this.testEvent}
},
methods: {testEvent () {console.log("你好")}
}
// Child.vue -------------------->
<Grandson></Grandson> // Grandson.vue -------------------------------->
<div @click="$emit('testEvent', 'msg from grandson')">
{{foo}}
</div>
inject:['foo', 'testEvent']
- 复杂关系: vuex存放共享的变量
-
state: 用来存放共享变量的地方
-
getter: 可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
-
mutations: 用来存放修改state的方法。
-
actions: 也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作
-
