Vue组件化实践

课堂目标

  1. 总结Vue组件化常用技术
    2. 深入理解Vue的组件化
    3. 设计并实现多种类型的组件
    4. 组件库源码学习
    5. vue3组件化注意事项

知识要点

  1. 组件通信方式
  2. 组件复合
  3. 组件构造函数和实例化
  4. 渲染函数
  5. 组件挂载
  6. 递归组件
  7. …

运行环境

  1. node 12.x
  2. vue.js 2.6.x
  3. vue-cli 4.x

知识点

组件化

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

image.png

组件通信常用方式

  • props
  • $emit/$on
  • event bus
  • vuex

边界情况

  • $parent
  • $children
  • $root
  • $refs
  • provide/inject
  • 非prop特性
    • $attrs
    • $listeners

组件通信

props

父给子传值

  1. // child
  2. props: { msg: String }
  4. // parent
  5. <HelloWorld msg="Welcome to Your Vue.js App"/>

自定义事件

子给父传值

  1. // child
  2. this.$emit('add', good)
  4. // parent
  5. <Cart @add="cartAdd($event)"></Cart>

事件总线

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

  1. // Bus：事件派发、监听和回调管理
  2. class Bus {
  3.   constructor () {
  4.     this.callbacks = {}
  5.   }
  6.   $on (name, fn) {
  7.     this.callbacks[name] = this.callbacks[name] || []
  8.     this.callbacks[name].push(fn)
  9.   }
  10.   $emit (name, args) {
  11.     if (this.callbacks[name]) {
  12.       this.callbacks[name].forEach(cb => cb(args))
  13.     }
  14.   }
  15. }
  17. // main.js
  18. Vue.prototype.$bus = new Bus()
  20. // child1
  21. this.$bus.$on('foo', handle)
  22. // child2
  23. this.$bus.$emit('foo')

实践中通常用Vue代替Bus，因为Vue已经实现了$on和$emit

vuex

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

组件通信最佳实践，预习视频第 12 章

$parent/$root

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

  1. // brother1
  2. this.$parent.$on('foo', handle)
  3. // brother2
  4. this.$parent.$emit('foo')

$children

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

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

注意：$children不能保证子元素顺序 和$refs有什么区别？

refs

获取子节点引用

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

$attrs/$listeners

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

  1. // child：并未在props中声明foo
  2. <p>{{$attrs.foo}}</p>
  4. // parent
  5. <HelloWorld foo="foo"/>
  8. // 给Grandson隔代传值，communication/index.vue
  9. <Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
  12. // Child2做展开
  13. <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
  15. // Grandson使用
  16. <div @click="$emit('some-event', 'msg from grandson')">
  17.     {{msg}}
  18. </div>

文档

provide/inject

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

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

范例：组件通信

组件通信范例代码请参考components/communication

插槽

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

匿名插槽
  1. // comp1
  2. <div>
  3.     <slot></slot>
  4. </div>
  6. // parent
  7. <comp>hello</comp>

具名插槽

将内容分发到子组件指定位置

  1. // comp2
  2. <div>
  3.   <slot></slot>
  4.   <slot name="content"></slot>
  5. </div>
  7. // parent
  8. <Comp2>
  9.   <!-- 默认插槽用default做参数 -->
  10.   <template v-slot:default>具名插槽</template>
  11.   <!-- 具名插槽用插槽名做参数 -->
  12.   <template v-slot:content>内容...</template>
  13. </Comp2>

作用域插槽

分发内容要用到子组件中的数据

  1. // comp3
  2. <div>
  3.     <slot :foo="foo"></slot>
  4. </div>
  7. // parent
  8. <Comp3>
  9.   <!-- 把v-slot的值指定为作用域上下文对象 -->
  10.   <template v-slot:default="slotProps">
  11.   来自子组件数据：{{slotProps.foo}}
  12.   </template>
  13. </Comp3>

范例

插槽相关范例请参考components/slots中代码

组件化实战

通用表单组件

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

需求

  • 表单KForm
    • 载体，输入数据model，校验规则rules
    • 校验validate
  • 表单项KFormItem
    • label标签添加
    • 载体，输入项包起来
    • 校验执行者，显示错误
  • 输入框KInput
    • 双绑
    • 图标、反馈

最终效果：Element表单

范例代码查看components/form/ElementTest.vue

KInput

创建components/form/ KInput.vue

  1. <template>
  2.   <div>
  3.       <input :value="value" @input="onInput" v-bind="$attrs">
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   inheritAttrs: false,
  10.   props: {
  11.     value: {
  12.       type: String,
  13.       default: ''
  14.     },
  15.   },
  16.   methods: {
  17.     onInput (e) {
  18.       this.$emit('input', e.target.value)
  19.     }
  20.   },
  21. }
  22. </script>

使用KInput

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

  1. <template>
  2.   <div>
  3.     <h3>KForm表单</h3>
  4.     <hr>
  5.     <k-input v-model="model.username"></k-input>
  6.     <k-input type="password" v-model="model.password"></k-input>
  7.   </div>
  8. </template>
  11. <script>
  12. import KInput from "./KInput";
  14. export default {
  15.   components: {
  16.     KInput
  17.   },
  18.   data () {
  19.     return {
  20.       model: { username: "tom", password: "" },
  21.     };
  22.   }
  23. };
  24. </script>

实现KFormItem

创建components/form/KFormItem.vue

  1. <template>
  2.   <div>
  3.     <label v-if="label">{{label}}</label>
  4.     <slot></slot>
  5.     <p v-if="error">{{error}}</p>
  6.   </div>
  7. </template>
  10. <script>
  11. export default {
  12.   props: {
  13.     label: {// 输入项标签
  14.       type: String,
  15.       default: ''
  16.     },
  17.     prop: {// 字段名
  18.       type: String,
  19.       default: ''
  20.     },
  21.   },
  22.   data () {
  23.     return {
  24.       error: '' // 校验错误
  25.     }
  26.   },
  27. };
  28. </script>

使用KFormItem

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

  1. <template>
  2.   <div>
  3.     <h3>KForm表单</h3>
  4.     <hr>
  5.     <k-form-item label="用户名" prop="username">
  6.       <k-input v-model="model.username"></k-input>
  7.     </k-form-item>
  8.     <k-form-item label="确认密码" prop="password">
  9.       <k-input type="password" v-model="model.password"></k-input>
  10.     </k-form-item>
  11.   </div>
  12. </template>

实现KForm
  1. <template>
  2.   <form>
  3.     <slot></slot>
  4.   </form>
  5. </template>
  7. <script>
  8. export default {
  9.   provide () {
  10.     return {
  11.       form: this // 将组件实例作为提供者，子代组件可方便获取
  12.     };
  13.   },
  14.   props: {
  15.     model: { type: Object, required: true },
  16.     rules: { type: Object }
  17.   }
  18. };
  19. </script>

使用KForm

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

  1. <template>
  2.   <div>
  3.     <h3>KForm表单</h3>
  4.     <hr>
  5.     <k-form :model="model" :rules="rules" ref="loginForm">
  6.       ...
  7.     </k-form>
  8.   </div>
  9. </template>
  12. <script>
  13. import KForm from "./KForm";
  15. export default {
  16.   components: {
  17.     KForm,
  18.   },
  19.   data () {
  20.     return {
  21.       rules: {
  22.         username: [{ required: true, message: "请输入用户名" }],
  23.         password: [{ required: true, message: "请输入密码" }]
  24.       }
  25.     };
  26.   },
  27.   methods: {
  28.     submitForm () {
  29.       this.$refs['loginForm'].validate(valid => {
  30.         if (valid) {
  31.           alert("请求登录!");
  32.         } else {
  33.           alert("校验失败！");
  34.         }
  35.       });
  36.     }
  37.   }
  38. };
  39. </script>

数据校验

Input通知校验

  1. onInput(e) {
  2.   // ...
  3.   // $parent指FormItem
  4.   this.$parent.$emit('validate');
  5. }

FormItem监听校验通知，获取规则并执行校验

  1. inject: ['form'], // 注入
  2. mounted () {// 监听校验事件
  3.     this.$on('validate', () => { this.validate() })
  4. },
  5. methods: {
  6.   validate () {
  7.     // 获取对应FormItem校验规则
  8.     console.log(this.form.rules[this.prop]);
  9.     // 获取校验值
  10.     console.log(this.form.model[this.prop]);
  11.   }
  12. },

安装async-validator：npm i async-validator -S

  1. import Schema from "async-validator";
  3. validate () {
  4.   // 获取对应FormItem校验规则
  5.   const rules = this.form.rules[this.prop];
  6.   // 获取校验值
  7.   const value = this.form.model[this.prop];
  8.   // 校验描述对象
  9.   const descriptor = { [this.prop]: rules };
  10.   // 创建校验器
  11.   const schema = new Schema(descriptor);
  12.   // 返回Promise，没有触发catch就说明验证通过
  13.   return schema.validate({ [this.prop]: value }, errors => {
  14.     if (errors) {
  15.       // 将错误信息显示
  16.       this.error = errors[0].message;
  17.     } else {
  18.       // 校验通过
  19.       this.error = "";
  20.     }
  21.   });
  22. }

表单全局验证，为Form提供validate方法

  1. validate (cb) {
  2.   // 调用所有含有prop属性的子组件的validate方法并得到Promise数组
  3.   const tasks = this.$children
  4.   .filter(item => item.prop)
  5.   .map(item => item.validate());
  6.   // 所有任务必须全部成功才算校验通过，任一失败则校验失败
  7.   Promise.all(tasks)
  8.     .then(() => cb(true))
  9.     .catch(() => cb(false))
  10. }

实现弹窗组件

弹窗这类组件的特点是它们 在当前vue实例之外独立存在 ，通常挂载于body；它们是通过JS动态创建
的，不需要在任何组件中声明。常⻅使用姿势：

  1. this.$create(Notice, {
  2.   title: '社会你杨哥喊你来搬砖',
  3.   message: '提示信息',
  4.   duration: 1000
  5. }).show();

create函数

  1. import Vue from "vue";
  3. // 创建函数接收要创建组件定义
  4. function create (Component, props) {
  5.   // 创建一个Vue新实例
  6.   const vm = new Vue({
  7.     render (h) {
  8.       // render函数将传入组件配置对象转换为虚拟dom
  9.       console.log(h(Component, { props }));
  10.       return h(Component, { props });
  11.     }
  12.   }).$mount(); //执行挂载函数，但未指定挂载目标，表示只执行初始化工作
  14.   // 将生成dom元素追加至body
  15.   document.body.appendChild(vm.$el);
  17.   // 给组件实例添加销毁方法
  18.   const comp = vm.$children[0];
  19.   comp.remove = () => {
  20.     document.body.removeChild(vm.$el);
  21.     vm.$destroy();
  22.   };
  23.   return comp;
  24. }
  26. // 暴露调用接口
  27. export default create;

另一种创建组件实例的方式：Vue.extend(Component)

通知组件

建通知组件，Notice.vue

  1. <template>
  2.   <div class="box" v-if="isShow">
  3.     <h3>{{title}}</h3>
  4.     <p class="box-content">{{message}}</p>
  5.   </div>
  6. </template>
  9. <script>
  10. export default {
  11.   props: {
  12.     title: {
  13.       type: String,
  14.       default: ""
  15.     },
  16.     message: {
  17.       type: String,
  18.       default: ""
  19.     },
  20.     duration: {
  21.       type: Number,
  22.       default: 1000
  23.     }
  24.   },
  25.   data () {
  26.     return {
  27.       isShow: false
  28.     };
  29.   },
  30.   methods: {
  31.     show () {
  32.       this.isShow = true;
  33.       setTimeout(this.hide, this.duration);
  34.     },
  37.     hide () {
  38.       this.isShow = false;
  39.       this.remove();
  40.     }
  41.   }
  42. };
  43. </script>
  46. <style>
  47. .box {
  48.   position: fixed;
  49.   width: 100%;
  50.   top: 16px;
  51.   left: 0;
  52.   text-align: center;
  53.   pointer-events: none;
  54.   background-color: #fff;
  55.   border: grey 3px solid;
  56.   box-sizing: border-box;
  57. }
  58. .box-content {
  59.   width: 200px;
  60.   margin: 10px auto;
  61.   font-size: 14px;
  62.   padding: 8px 16px;
  63.   background: #fff;
  64.   border-radius: 3px;
  65.   margin-bottom: 8px;
  66. }
  67. </style>

使用create

测试，components/form/index.vue

  1. <script>
  2. import create from "@/utils/create";
  3. import Notice from "@/components/Notice";
  5. export default {
  6.   methods: {
  7.     submitForm (form) {
  8.       this.$refs[form].validate(valid => {
  9.         const notice = create(Notice, {
  10.           title: "社会你杨哥喊你来搬砖",
  11.           message: valid ? "请求登录!" : "校验失败!",
  12.           duration: 1000
  13.         });
  14.                 notice.show();
  15.       });
  16.     }
  17.   }
  18. };
  20. </script>

思考拓展

  1. 范例中$parent/$children写法不够健壮，如何修正？
  2. 学习element源码，从中获取答案

vue3中的组件化

起始

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  10. <body>
  11.   <div id="app">
  12.     {{data}}
  13.   </div>
  15.   <script src="https://unpkg/vue@next"></script>
  16.   <script>
  17.     const {
  18.       createApp
  19.     } = Vue
  20.     createApp({
  21.       data() {
  22.         return {
  23.           data: 'fooooo'
  24.         }
  25.       },
  26.     }).mount('#app')
  27.   </script>
  28. </body>
  30. </html>

composition-api

更好的代码组织和复用性

  1. createApp({
  2.   setup () {
  3.     const data = ref('fooooo')
  4.     return { data }
  5.   }
  6. }).mount('#app')

文档 视频教程

global-api改为实例方法

全局静态方法引发一些问题，vue3将global-api改为app实例方法

  1. // Vue.component()
  2. const app = createApp({})
  3.   .component('comp', { template: '<div>i am comp</div>' })
  4.   .mount('#app')

.sync和model选项移除，统一为v-model

以前.sync和v-model功能有重叠，容易混淆，vue3做了统一。

  1. <div id="app">
  2.   <h3>{{data}}</h3>
  3.   <comp v-model="data"></comp>
  4. </div>
  1. app.component('comp', {
  2.   template: `
  3. <div @click="$emit('update:modelValue', 'new value')">
  4. i am comp, {{modelValue}}
  5. </div>
  6. `,
  7.   props: ['modelValue'],
  8. })

渲染函数api修改

不再传入h函数，需要我们手动导入；拍平的props结构。scopedSlots删掉了，统一到slots

  1. import { h } from 'vue'
  3. render() {
  4.   const emit = this.$emit
  5.   const onclick = this.onclick
  6.   return h('div', [
  7.     h('div', {
  8.       onClick () {
  9.         emit('update:modelValue', 'new value')
  10.       }
  11.     }, `i am comp, ${this.modelValue}`),
  12.     h('button', {
  13.       onClick () {
  14.         onclick()
  15.       }
  16.     }, 'buty it!')
  17.   ])
  18. },

组件emits选项

该选项用于标注自定义事件及其校验等。

  1. createApp({
  2.   setup () {
  3.     return {
  4.       // 添加一个onBuy方法
  5.       onBuy (p) {
  6.         console.log(p);
  7.       },
  8.     };
  9.   },
  10. })
  11.   .component("comp", {
  12.     template: `
  13. <div>
  14. <div @click="$emit('update:modelValue', 'new value')">i am comp,
  15. {{modelValue}}</div>
  16. <button @click="$emit('buy', 'nothing')">buy it!</button>
  17. </div>
  18. `,
  19.     // emits标明组件对外事件
  20.     // emits: ['buy', '...']
  21.     emits: {
  22.       'update:modelValue': null, // 不做校验
  23.       buy (p) { // 校验buy事件
  24.         if (p === 'nothing') {
  26.           console.warn('参数非法');
  27.           return false
  28.         } else {
  29.           return true
  30.         }
  31.       }
  32.     },
  33.   })
  1. <comp v-model="data" @buy="onBuy"></comp>

$on, $once, $off被移除

上述 3 个方法被认为不应该由vue提供，因此被移除了，可以使用其他库实现等效功能。

  1. <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
  1. // 发送事件
  2. emitter.emit('foo', 'foooooooo')
  4. // 监听事件
  5. emitter.on('foo', msg => console.log(msg))

作业

仿照element-ui table实现KTable

  1. 基本展示

使用形式如下：

  1. <k-table :data="tableData">
  2.   <k-table-column prop="date" label="日期"></k-table-column>
  3. </k-table>

展示效果图
image.png

  1. 可以自定义列模板

形式如下

  1. <k-table-column label="操作" :default-sort = "{prop: 'date', order:'descending'}">
  2.     <k-table-column prop="date" label="日期" sortable></k-table-column>
  3. </k-table-column>
  1. 实现表格排序方法

要求：在k-table-column中传入sortable参数即可在该列表头出现升序和降序排序方法，进行相应的排
序
形式如下

  1. <k-table-column label="操作">
  2.     <template v-slot="scope"> {{ scope.row.operation }} </template>
  3. </k-table-column>

效果如下：
image.png

  1. 针对表格编写一个测试用例