父组件 => 子组件
-
属性 props
//child
props: {msg: String}
//parent
<HellowWorld msg="welcome to your vue.js App" />
-
特性 $attrs
//child, 并未在props中声明foo
<p>{{$attrs.foo}}</p>
//parent
<HellowWorld foo="foo" />
-
引用 refs
//parent
<HellowWorld foo="hw" />
mounted(){
this$refs.hw.xx = 'xx'
}
-
子元素$children
//parent
this.$children[0].xx = 'xxx'
子组件 => 父组件: 自定义事件
//child
this.$emit('add', good)
//parent
<Cart @add="cartAdd($event)" ></Cart>
兄弟组件: 通过共同祖辈组件
通过共同祖辈组件搭桥,$parent或#root
//brother1
this.$parent.$on('foo', handle)
//brother2
this.$parent.$emit('foo')
祖先和后代之间
由于嵌套数过多,传递props不切实际,vue提供了provide/inject API完成该任务
-
provide/inject: 能够实现祖先给后代传值
// ancestor
provide(){
return { foo: 'foo' }
}
//descendant
inject: ['foo']
任意两个组件之间: 事件总线或vuex
-
事件总线: 创建一个Bus类负责事件派发,监听和回调管理
//Bus,事件派发,监听和回调管理
Class Bus{
constructor(){
this.callbacks = {}
}
$on(name, fn){
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn)
}
$emit(name, args){
if(this.callbacks[name]){
this.callbacks[name].forEach(cb => cb(args))
}
}
}
//main.js
Vue.prototype.$bus = new Bus()
//child1
this.$bus.$on('foo', handle)
//child2
this.$bus.$emit('foo')
实践中可以用Vue代理Bus,因为它已经实现了相应功能
-
vuex: 创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更
