01 组件化实战
组件化
vue组件系统提供了⼀种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为⼀个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。
组件通信常用方式
props
event
vuex
自定义事件
-
边界情况
$parent
$children
$root
$refs
provide/inject
-
非prop特性
$attrs
$listeners
组件通信
props
父子传值
// child
props: { msg: String }
// parent
自定义事件
子父传值
// child
this.$emit('sonToFather', 'son-->Father')
// parent
事件总线
任意两个组件之间传值常用事件总线或 vuex 的方式。
// Bus: 事件派发、监听和回调管理
class Bus {
constructor() {
this.event = {}
}
// 订阅事件
$on (eventName, callback) {
if (!this.event[eventName]) {
this.event[eventName] = []
}
this.event[eventName].push(callback)
}
// 触发事件（发布事件）
$emit (eventName, params) {
let eventArr = this.event[eventName]
if (eventArr) {
eventArr.map(item => {
item(params)
})
}
}
// 删除订阅事件
$off (eventName, callback) {
let arr = this.event[eventName]
if (arr) {
if (callback) {
let index = arr.indexOf(callback)
arr.splice(index, 1)
} else {
arr.length = 0
}
}
}
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('testBus',handle)
// child2
this.$bus.$emit('testBus')
实践中通常用 Vue 代替 Bus，因为 Vue 已经实现了相应接口
vuex
组件通信最佳实践
创建唯⼀的全局数据管理者 store，通过它管理数据并通知组件状态变更。
root
兄弟组件之间通信可通过共同祖辈搭桥，root。
// brother1
this.$parent.$on('testParent',handle)
// brother2
this.$parent.$emit('testParent')
$children
父组件可以通过 $children 访问子组件实现父子通信。
// parent
this.$children[0].xx = 'xxx'
注意：$children 不能保证子元素顺序
和 $refs 有什么区别？
listeners
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当⼀个组件没有
声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
// child:并未在props中声明foo
{{$attrs.foo}}
// parent
文档
refs
获取子节点引用
// parent
mounted() {
this.$refs.testRef.xx='xxx'
}
provide/inject
能够实现祖先和后代之间传值
// ancestor
provide() {
return {foo: 'foo'}
}
// descendant
inject: ['foo']
范例：组件通信
插槽
插槽语法是 Vue 实现的内容分发 API，用于复合组件开发。该技术在通用组件库开发中有大量应用。
匿名插槽
// comp1
testSlot
具名插槽
将内容分发到子组件指定位置
// comp2
具名插槽
内容...
作用域插槽
分发内容要用到子组件中的数据
// comp3
来自子组件数据：{{slotProps.foo}}
范例：插槽
组件化实战
通用表单组件
收集数据、校验数据并提交。
需求分析
-
实现 KForm
- 指定数据、校验规则
-
KformItem
label 标签添加
执行校验
显示错误信息
-
KInput
- 维护数据
最终效果：Element 表单
范例代码
KInput
创建 components/form/KInput.vue
使用 KInput
创建 components/form/index.vue，添加如下代码：
Form表单
实现 KFormItem
创建components/form/KFormItem.vue
{{error}}
使用 KFormItem
components/form/index.vue，添加基础代码：
Form表单
实现 KForm
使用 KForm
components/form/index.vue，添加基础代码：
Form表单
...
数据校验
Input 通知校验
onInput(e) {
// ...
// $parent指FormItem
this.$parent.$emit('validate')
}
FormItem 监听校验通知，获取规则并执行校验
inject: ['form'], // 注入
mounted() { // 监听校验事件
this.$on('validate',() => {this.validate()})
},
methods:{
validate() {
// 获取对应 FormItem 校验规则
console.log(this.form.rules[this.prop])
// 获取校验值
console.log(this.form.model[this.prop])
}
}
安装 async-validator:
npm i async-validator -S
import Schema from 'async-validator'
validate() {
// 获取对应 FormItem 校验规则
const rules = this.form.rules[this.prop]
// 获取校验值
const value = this.form.model[this.prop]
// 校验描述对象
const descriptor = {[this.prop]:rules}
// 创建校验器
const schema = new Schema(descriptor)
// 返回 Promise，没有触发 catch 就说明验证通过
return schema.validate({[this.prop]:value},errors=>{
if (errors) {
// 将错误信息显示
this.error = errors[0].message
} else {
// 校验通过
this.error = ''
}
})
}
表单全局验证，为 Form 提供 validate 方法
validate(cb){
// 调用所有含有 prop 属性的子组件的 validate 方法并得到 Promise 的值
const tasks = this.$children
.filter(item => item.prop)
.map(item => item.validate())
// 所有任务必须全部成功才算校验通过，任一失败则校验失败
Promise.all(tasks)
.then(() => cb(true))
.catch(() => cb(false))
}
实现弹窗组件
弹窗这类组件的特点是它们在当前 vue 实例之外独立存在，通常挂载于 body；它们是通过 JS 动态创建
的，不需要在任何组件中声明。常见使用姿势：
this.$create(Notice, {
title: '林慕-弹窗组件'
message: '提示信息',
duration: 1000
}).show()
create 函数
import Vue from 'vue'
// 创建函数接收要创建组件定义
function create(Component, props) {
// 创建一个 Vue 实例
const vm = new Vue({
render(h) {
// render 函数将传入组件配置对象转换为虚拟 dom
console.log(h(Component,{props}))
return h(Component, {props})
}
}).$mount() // 执行挂载函数，但未指定挂载目标，表示只执行初始化工作
// 将生成 dom 元素追加至 body
document.body.appendChild(vm.$el)
// 给组件实例添加销毁方法
const comp = vm.$children[0]
comp.remove = () => {
document.body.removeChild(vm.$el)
vm.$destroy()
}
return comp
}
// 暴露调用接口
export default create
另一种创建组件实例的方式： Vue.extend(Component)
通知组件
新建通知组件，Notice.vue
{{title}}
{{message}}
使用 create api
测试，components/form/index.vue
递归组件
// TODO
拓展
- 使用 Vue.extend 方式实现 create 方法
- 方法一：和第一个 create 方法类似
export function create2 (Component, props) {
let VueMessage = Vue.extend({
render(h) {
return h(Component, {props})
}
})
let newMessage = new VueMessage()
let vm = newMessage.$mount()
let el = vm.$el
document.body.appendChild(el)
const comp = vm.$children[0]
comp.remove = () => {
document.body.removeChild(vm.$el)
vm.$destroy()
}
return comp
}
- 方法二：利用 propsData 属性
export function create3 (Component, props) {
// 组件构造函数如何获取？
// 1. Vue.extend()
const Ctor = Vue.extend(Component)
// 创建组件实例
const comp = new Ctor({ propsData: props })
comp.$mount()
document.body.appendChild(comp.$el)
comp.remove = function () {
document.body.removeChild(comp.$el)
comp.$destroy()
}
return comp
}
方法三：使用插件进一步封装便于使用，create.js
import Notice from '@/components/Notice.vue'
// ...
export default {
install(Vue) {
Vue.prototype.$notice = function (options) {
return create(Notice, options)
}
}
}
// 使用
this.$notice({title: 'xxx'})
- 修正 input 中 $parent 写法的问题
mixin emitter
声明 componentName
dispatch()
- 学习 Element 源码