对vue2版本的组件之间传值的一个简单整合:
- 父组件 =》 子组件: props 和 refs
-
props: { msg: String }
//parent
<hello-world :msg="welcome to vue.js" />
this.$ref.helloWorld.msg
- 子组件 =》 父组件 : 自定义事件
//child
this.$emit('send', msg)
//parent
<hello-world @send="sendMsg($event)" />
- 兄弟组件: 通过共同祖辈搭桥 p a r e n t 或 parent或 parent或root
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
- 祖先=>后代 provide/inject
// ancestor
provide() {
return {
msg: 'welcome'
}
}
// descendant
inject: ['msg']
- 后代 =》祖先 递归一直派发到root
// 定义一个dispatch方法,指定要派发事件名称和数据
function dispatch(eventName, data) {
let parent = this.$parent
while (parent) {
// 父元素来用$emit触发
parent.$emit(eventName,data)
// 递归查找父元素 只要还存在父元素就继续往上查找
parent = parent.$parent
}
}
// 使用,HelloWorld.vue
<h1 @click="dispatch('hello', 'hello,world')">{{ msg }}</h1>
// App.vue
this.$on('hello', this.sayHello)
-
任意两个组件之间 事件总线 和 vuex
事件总线
class EventBus {
constructor() {
this.callbacks = {}
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn)
}
$emit(name) {
let fns = this.callbacks[name]
if(fns) {
fns.map(fn => fn())
}
}
}
//运用
main.js
Vue.prototype.$bus = new EventBus()
this.$bus.$on('send', handleFn)
this.$bus.$emit('send')
vuex: 创建唯一的全局数据管理者store,过载到vue实例,通过它管理状态数据并通知组件状态变更
3,4,5,6 都可以直接用$root