学习目标:

1、深入理解Vue的组件化机制

2、掌握Vue组件化常用技术

3、能够设计并实现多种类型的组件

4、加深对一些Vue原理的理解

5、学会看开源组件源码

知识要点:

1、组件通信方式

2、组件复会

3、组件构造函数和实例化

4、渲染函数

5、组件挂载

6、递归组件

运行环境:

node:12.x 

vue:2.6.x

vue-cli:4.x

知识点:

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

组件通信常用方式:

(1)常用的通信方式:

props(父子组件的通信方式,传属性)
⽗给⼦传值
// child props: { msg: String } // parent ⾃定义事件⼦给⽗传值// child this.$emit('add', good)// parent 
  
$emit/$on(父子组件的通信方式,派发事件)
event bus(跨层级的通信方式,事件总线)
children1与children2之间借助中间人$bus的角色做这件事情。(children1监听,children2派发)
思考:bus是怎样实现的?
// Bus:事件派发、监听和回调管理
class Bus { 
        constructor(){ 
//先去生命一个callbacks的对象,相当于一个大管家,可以在上面去订阅
            this.callbacks = {} 
        } 
//订阅的方式是$on,name为监听的事件,fn为事件触发后要执行的回调函数
        $on(name, fn){ 
//回调函数可能是数组,一个事件可以订阅好多次,所以往数组中去push回调函数
            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,通过它管理数据并通知组件状态变更。

(2)不常用的通信方式:

$parent(耦合性高)

$root(耦合性高)

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

事件的派发和监听通常是一个

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

事件监听some-event,事件的监听者仍然是children1

vue 自定义组件template_vue自定义失去焦点校验

vue 自定义组件template_vue自定义失去焦点校验_02

$children(耦合性高)

⽗组件可以通过$children访问⼦组件实现⽗⼦通信。

vue 自定义组件template_Vue_03

vue 自定义组件template_vue自定义失去焦点校验_04

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

注意:$children不能保证⼦元素顺序

$refs(获取⼦节点引⽤)

vue 自定义组件template_vue 自定义组件template_05

vue 自定义组件template_vue 自定义组件template_06

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

思考:children和refs的不同?

children里面只会有自定义组件,refs里面可以是原生的元素(dom元素、自定义组件)

provide/inject(隔层传参)

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

爷爷:

vue 自定义组件template_插槽_07

孙子:

vue 自定义组件template_Vue_08

vue 自定义组件template_vue自定义失去焦点校验_09

担心重名的方式,可以使用对象

vue 自定义组件template_数据_10

设置默认值

vue 自定义组件template_vue自定义失去焦点校验_11

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

非prop特性:

包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当⼀个组件没有 声明任何 prop 时,这⾥会包含所有⽗作⽤域的绑定 ( class 和 style 除外),并且可以通过 vbind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。

$attrs

vue 自定义组件template_数据_12

vue 自定义组件template_Vue_13

跨层之间通信(爷孙)

首先,创建一个父亲

vue 自定义组件template_vue 自定义组件template_14

vue 自定义组件template_vue自定义失去焦点校验_15

vue 自定义组件template_数据_16

$listeners

index.vue中(爷爷)

vue 自定义组件template_vue 自定义组件template_17

vue 自定义组件template_vue 自定义组件template_18

父亲

vue 自定义组件template_Vue_19

孙子

vue 自定义组件template_vue自定义失去焦点校验_20

// child:并未在props中声明foo
{{$attrs.foo}}
// parent

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

匿名插槽

// comp1
// parent
hello

具名插槽

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

// comp2
// parent
 具名插槽
 内容...
作⽤域插槽
分发内容要⽤到⼦组件中的数据
// comp3
// parent

 来⾃⼦组件数据:{{slotProps.foo}}

组件化实战

通⽤表单组件 收集数据、校验数据并提交

需求分析

实现KForm 

    指定数据、校验规则

KformItem 

    label标签添加 

    执⾏校验 

    显示错误信息 

KInput 

    维护数据v-model

    图标、反馈

功能-实现双向绑定

vue 自定义组件template_vue 自定义组件template_21

vue 自定义组件template_Vue_22

vue 自定义组件template_插槽_23

vue 自定义组件template_插槽_24

扩展功能:额外属性的传入

vue 自定义组件template_Vue_25

vue 自定义组件template_Vue_26

标单项的开发

vue 自定义组件template_数据_27

vue 自定义组件template_插槽_28

vue 自定义组件template_vue 自定义组件template_29