01Vue组件化实战

01 组件化实战

组件化

vue组件系统提供了⼀种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为⼀个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。

image.png

组件通信常用方式

props
event
vuex

自定义事件

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

组件通信

props

父子传值

// child
props: { msg: String }

// parent
<HelloWord msg="测试父子传值" />

自定义事件

子父传值

// child
this.$emit('sonToFather', 'son-->Father')

// parent
<Cart @sonToFather="testSonToFather($event)"></Cart>

事件总线

任意两个组件之间传值常用事件总线或 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，通过它管理数据并通知组件状态变更。

$parent/$ root

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

// brother1
this.$parent.$on('testParent',handle)

// brother2
this.$parent.$emit('testParent')

$children

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

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

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

和 $refs 有什么区别？

$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="testRef">

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

provide/inject

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

// ancestor
provide() {
  return {foo: 'foo'}
}

// descendant
inject: ['foo']

范例：组件通信

插槽

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

匿名插槽

// comp1
<div>
  <slot></slot>
</div>

// parent
<Comp>testSlot</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>

范例：插槽

组件化实战

通用表单组件

收集数据、校验数据并提交。

需求分析

实现 KForm
- 指定数据、校验规则
KformItem
- label 标签添加
- 执行校验
- 显示错误信息
KInput
- 维护数据

最终效果：Element 表单

范例代码

KInput

创建 components/form/KInput.vue

<template>
  <div>
    <input :value="value" @input="onInput" v-bind="$attrs">
  </div>
</template>

<script>
  export default {
    inheritAttrs:false,
    props:{
      value:{
        type:String,
        default:''
      }
    },
    methods:{
      onInput(e){
        this.$emit('input',e.target.value)
      }
    }
  }
</script>

使用 KInput

创建 components/form/index.vue，添加如下代码：

<template>
  <div>
    <h3>Form表单</h3>
    <hr>
    <k-input v-model="model.username"></k-input>
    <k-input type="password" v-model="model.password"></k-input>>
  </div>
</template>

<script>
import KInput from './KInput'

export default {
  components:{
    KInput
  },
  data(){
    return {
      model:{
        username:'tom',
        password:''
      }
    }
  }
}
</script>

实现 KFormItem

创建components/form/KFormItem.vue

<template>
  <div>
    <label v-if="label">{{label}}</label>
    <slot></slot>
    <p v-if="error">{{error}}</p>
  </div>
</template>

<script>
export default {
  props: {
    label:{ // 输入项标签
      type: String,
      default:''
    },
    prop:{ // 字段名
      type: String,
      default: ''
    }
  },
  data() {
    return {
      error: '' // 校验错误
    }
  }
}
</script>

使用 KFormItem

components/form/index.vue，添加基础代码：

<template>
  <div>
    <h3>Form表单</h3>
    <hr>
    <k-form-item label="用户名" prop="username">
      <k-input v-model="model.username"></k-input>
    </k-form-item>
    <k-form-item label="确认密码" prop="password">
      <k-input type="password" v-model="model.password"></k-input>
    </k-form-item>
  </div>
</template>

实现 KForm

<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  provide() {
    return {
      form: this // 将组件实例作为提供者，子代组件可方便获取
    }
  },
  props:{
    model:{
      type: Object,
      required: true
    },
    rules:{
      type: Object
    }
  }
}
</script>

使用 KForm

components/form/index.vue，添加基础代码：

<template>
  <div>
    <h3>Form表单</h3>
    <hr/>
    <k-form :model="model" :rules="rules" ref="loginForm">
      ...
    </k-form>
  </div>
</template>

<script>
import KForm from './KForm'

export default {
  components: {
    KForm
  },
  data() {
    return {
      rules: {
        username: [{
          required: true,
          message: '请输入用户名'
        }],
        password: [{
          required: true,
          message: '请输入密码'
        }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          alert('请求登录')
        } else {
          alert('校验失败')
        }
      })
    }
  }
}
</script>

数据校验

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

<template>
  <div class="box" v-if="isShow">
    <h3>{{title}}</h3>
    <p class="box-content">{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    show() {
      this.isShow = truw
      setTimeout(this.hide, this.duration)
    },
    hide() {
      this.isShow = false
      this.remove()
    }
  }
}
</script>
<style>
.box {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  background-color: #fff;
  border: grey 3px solid;
  box-sizing: border-box;
}
.box-content {
  width: 200px;
  margin: 10px auto;
  font-size: 14px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
}
</style>

使用 create api

测试，components/form/index.vue

<script>
import create from "@/utils/create"
import Notice from "@/components/Notice"

export default {
  methods: {
    submitForm(form) {
      this.$refs[form].validate(valid => {
        const notice = create(Notice, {
          title: '林慕-create',
          message: valid ? '请求登录' : '校验失败',
          duration: 1000
        })
        notice.show()
      })
    }
  }
}
</script>

递归组件

// 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 源码