组件化
vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界
⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护
性，便于多⼈协同开发。
组件通信常⽤⽅式
props
event
vuex
⾃定义事件
边界情况
children
refs
provide/inject
⾮prop特性
listeners
组件通信
props
⽗给⼦传值
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>
事件总线
任意两个组件之间传值常⽤事件总线 或 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，通过它管理数据并通知组件状态变更。
root
兄弟组件之间通信可通过共同祖辈搭桥，root
// brother1
this.$parent.$on('foo', ha// brother2
this.$parent.$emit('foo')
children访问⼦组件实现⽗⼦通信。
// parent
this.$children[0].xx = 'xxx'
注意：attrs/
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>
网友评论