Vue

组件通信问题

组件通信问题

父子组件通信：

props 和event、 v-model、.sync、 ref、 $parent和 $children

非父子组件通信：

$attr 和 $listeners provide 和 inject. eventbus 、通过跟实例$root vuex、dispatch和brodcast

父给子传值

1
2
3
4
// child:
props: {msg:String}
// parent
<helloworld msg="Welcome to vue.js"/>

子给父传值

1
2
3
4
5
// child
this.$emit('add', good)

// parent
<Cart @add="cardAdd($event)"></Cart>

事件总线
任意两个组件之间传值常用事件总线或 vuex的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 
class Bus {
	constructor(){
		this.callbacks = {}
	}
	$on(name, fn){
		this.callbacks[name] = this.callbacks[name] || [];
		this.callbacks[name].push(fn);
	}
	$emit(name,args){
		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')

兄弟组件之间通信可以通过共同祖辈$parent或者$root

// brother1
this.$parent.$on(‘event’, handleEvent)

//brother2
this.$parent.$emit(‘event’)

$children

父组件可以通过$children访问子组件实现父子通信

1
2
//parent
this.$children[0].xx = 'xxx'

$attr/$listeners

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当一个组件没有 声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外)，并且可以通过 v- bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。

1
2
3
// child:并未在props中声明foo <p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

refs
获取子节点引用

1
2
3
4
5
// parent
<HelloWorld ref="hw"/>
mounted() {
    this.$refs.hw.xx = 'xxx'
}

provide/inject

能够实现祖先和后代之间传值

1
2
3
4
5
6
// ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo']