vue自定义失去焦点校验_Vue组件化实战（上）

学习目标：

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

$children(耦合性高)

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

// parent 

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

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

$refs(获取⼦节点引⽤)

// parent

mounted() { 

    this.$refs.hw.xx = 'xxx' 

   }

思考：children和refs的不同？

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

provide/inject(隔层传参)

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

爷爷：

孙子：

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

设置默认值

// ancestor

provide() { 

return {foo: 'foo'} 

} 

// descendant 

inject: ['foo']

非prop特性：

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

$attrs

跨层之间通信(爷孙)

首先，创建一个父亲

$listeners

index.vue中(爷爷)

父亲

孙子

// child：并未在props中声明foo

{ {$attrs.foo}}

// parent 

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

匿名插槽

// comp1

// parent

hello

具名插槽

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

// comp2

// parent

 具名插槽

 内容...

作⽤域插槽

分发内容要⽤到⼦组件中的数据

// comp3

// parent

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

组件化实战

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

需求分析

实现KForm 

    指定数据、校验规则

KformItem 

    label标签添加 

    执⾏校验 

    显示错误信息 

KInput 

    维护数据v-model

    图标、反馈

功能-实现双向绑定

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

标单项的开发