vue组件化相关：组件间通信及插槽

组件化

vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界 ⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护 性，便于多⼈协同开发。

组件通信常⽤⽅式

• props
• event
• vuex

自定义事件

• 边界情况
  • $parent
  • $chidren
  • $root
  • $refs
  • provide/inject
• 非prop特性
  • $attrs
  • $listeners

组件通信

props
父给子传值

// child
props:{ msg: String }

// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>

自定义事件
子给父传值

// child
this.$emit{'add', good}

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

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

// 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，因为Vue已经实现了相应接⼝

vuex
创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。

$parent / $root
兄弟组件之间通信可通过共同祖辈搭桥， $parent或 $root

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

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

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

注意： $children不能保证子元素顺序

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

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

refs
获取子节点引用

// parent
<HelloWorld ref="hw"/>

mounted() {
	this.$refs.hw.xx = 'xxx'
}

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

// ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo']

插槽

插槽语法是Vue实现的内容分发API，用于复合组件开发，该技术在通用组件库开发中有大量应用。
匿名插槽

// comp1
<div>
	<slot></slot>
</div>
// parent
<comp>hello</comp>

具名插槽
将内容分发到子组件指定位置

// comp2
<div>
	<slot></slot>
	<slot name="content"></slot>
</div>
// parent
<Comp2>
	<!-- 默认插槽⽤default做参数 -->
	<template v-slot:default>具名插槽</template>
	<!-- 具名插槽⽤插槽名做参数 -->
	<template v-slot:content>内容...</template>
</Comp2>

作用域插槽
分发内容要用到子组件中的数据

// comp3
<div>
	<slot :foo="foo"></slot>
</div>
// parent
<Comp3>
	<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
	<template v-slot:default="slotProps">
	来⾃⼦组件数据：{{slotProps.foo}}
	</template>
</Comp3>