1 可复用组件

• 在 vue 中，我们可以通过 new Vue 来创建一个组件
• 不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件。
• 不同于根组件，同一个可复用组件，可以在同一个应用中多次使用。
  

1-1 可复用UI组件的创建

• 可复用组件在构建选项上与全局组件基本一致
• 可复用组件可以像标签一些在模板中使用
• 不能与原生的html标签重名
• 组件的options里面有一个选项：components，可以通过该选项来定义组件

全局组件

Vue.component('组件名称', {组件选项})

可以在任意位置（多个不同的 Vue 应用中）使用。

局部组件

new Vue({...,components: {'组件名称': {组件选项}	}
})

局部组件只能在其定义的组件内使用，也不能在其子组件内部使用

    <div id="app"><my-component1></my-component1><my-component2><my2></my2></my-component2><!-- <my2></my2> --><my3></my3><my4></my4></div><script src="./js/vue.js"></script><script>Vue.component("my-component1", {template: `<div>全局组件1</div>`,})Vue.component('my-component2', {template: `<div>全局组件2</div>`,components: {'my2': {template: `<div>My2</div>`}}});new Vue({el: '#app',components: {'my3': {template: `<div>局部组件</div>`},"my4": {template: `<div>局部组件2</div>`}}});</script>

1-2 组件内部私有数据

可复用组件的 data 必须是函数，且该函数必须返回一个对象作为组件最终的 data
会使得复用的组件数据之间不会相互影响
如下点击事件只会影响点击的对应组件中的数据

    <div id="app"><my-component1></my-component1><my-component1></my-component1></div><script src="./js/vue.js"></script><script>Vue.component("my-component1", {template: `<div @click="add">全局组件1 - {{a}} - {{b}}</div>`,data: function() {return {a: 1,b: 2,}},methods: {add(){this.a++;}},})</script>

1-3 组件外部传入数据

如同一个函数一样，函数除了可以定义内部私有变量，有时候为了提高函数的复用性，我们通过会通过参数来接收外部传入的数据。组件也可以。

props

组件中内部私有数据存储中组件 data 中，通过外部传入的数据，则通过 props 选项接收。

首先，组件内部通过 props 来定义可以接收的数据名称，就像是函数的形参。

然后，在使用该组件的时候可以通过标签属性的方式进行传参（可配合 v-bind 传入表达式）。

注意事项

• 如果传入的 props 值为一个表达式，则必须使用 v-bind
• 组件中的 data 和 props 数据都可以通过组件实例进行直接访问
• data 中的 key 与 props 中的 key 不能冲突

案例：做一个分页组件

父级调用组件的时候将父级数据传递给组件

Vue.component('kkb-pagination', {// 类似给函数定义形参，接收父级传来的数据props: ['total', 'prepage', 'page'],data() {// data 中是可以通过this访问到 props 的return {pages: Math.ceil((this.total / this.prepage))};},// template可以直接访问到props里的数据template: `<div class="pagination"><a href="" class="prev">上一页</a><a href="javascript:;" v-for="p of pages":class="{current: p == page}"@click="changePage(p)">{{p}}</a><a href="" class="next">下一页</a></div>`,});

1-4 组件通信

1 作用域隔离

为了保证数据安全性（传入的数据通常会在其它组件中也有使用），Vue 不推荐我们在组件内部直接修改传入的数据。

2 父组件到子组件内部的数据传递

父组件通过上述提到的 props 向一个子组件内部传递数据。

3 子组件内部到外部的数据传递

$emit()

vue 为每个组件对象提供了一个内置方法 $emit ，它等同于自定义事件中的 new Event,trigger 等

this.$emit('自定义事件名称', 事件数据)

• 子级通过$emit方法通知父级来修改数据
• 事件数据就是中触发事件的同时携带传递的数据 - event
• 父级在使用该组件的过程中，可以通过 @事件名称 来注册绑定事件函数
• 事件函数的第一个参数就是事件数据

4 数据双向绑定

v-model

v-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程。

model 选项

prop 指定要绑定的属性，默认是 value

event 指定要绑定触发的事件，默认是 input 事件

案例：使用v-model 实现分页点击修改

子组件写上$emit事件

    methods: {changePage(p) {this.$emit('change', p);}}

model配置里绑定page数据与change方法
当组件 emit 的事件名称是 event 指定，那么就根据上面的prop指定属性去更改对应的值

    model: {// v-model的数据是绑定到 props 中 page 属性，默认是valueprop: 'page',// event，当组件 emit 的事件名称是 event 指定，那么就根据上面的prop指定属性去更改对应的值event: 'change'},

点击成功修改

.sync

通过 v-model 来进行双向绑定，会给状态维护带来一定的问题，因为修改比较隐蔽，
同时只能处理一个 prop 的绑定，我们还可以通过另外一种方式来达到这个目的。

update:[prop]

这里事件名称要使用 update 加上 prop 名称 的格式

案例：通过.sync 改写分页组件的数据双绑

先给v-bind加上修饰符.sync

触发一个update事件，使用p去更新page（page必须是通过 .sync 来进行绑定的）

    methods: {changePage(p) {// 触发一个update事件，使用p去更新page（page必须是通过 .sync 来进行绑定的）this.$emit('update:page', p);},// 将每页数据量大小改为5changePrepage(e) {e.preventDefault();this.$emit('update:prepage', 5);}}

成功修改

1-5 ref 与 $refs

• ref 被用来给元素或子组件注册引用信息。
• 引用信息将会注册在父组件的 $refs 对象上。
• 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
• 如果用在子组件上，引用就指向组件。

1-6 插槽

默认情况下，组件模板解析后会替换整个组件内容，
如果我们想在组件引用被包含的内容，可以通过 vue 提供的内置组件 slot 来获取。

slot

• Vue 提供了一个内置的组件 <slot>，用于在组件模板内定义插槽。
• 解析过程中，会被该组件嵌套的子组件（元素）对应的内容所替换。

默认替换

<slot></slot>

具名插槽

使用内置组件 template 与 v-slot 指令进行配置，用来命名插槽
在组件模板中，通过 <标签 v-slot:插槽名称> 来使用。

• 插槽名称默认为 default ，可以省略。

给插槽命名<slot name="left"...

<slot name="left" :pages="pages" a="1"></slot>

父组件使用v-slot:left

<template v-slot:left="data"><span>一共有{{cartItems.length}}条数据，一共{{data.pages}}页，当前{{cPage}}页</span>
</template>

作用域插槽

组件内部与组件包含的内容属于不同的作用域（被包含的内容是组件父级下的作用域）。

组件到父级作用域下的子级通信。

• 组件内部通过 slot 的 attributes 进行数据传递。
• 子级通过 v-slot 指令的值进行接收。

// 组件内部
<slot v-for="user of users" :user="user"></slot>// 组件外部子级
<template v-slot:default="data"><p>用户的姓名: {{data.user.username}}</p>
</template>

1-7 props 验证

组件的 props 就是组件的参数，为了确保传入的数据在可控的合理范围内，
我们需要对传入的 props 的值类型进行必要的验证。

Vue.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}
})

1-8 其它 props 相关知识点

非 prop 特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上。

替换/合并已有的特性

默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）。
比如父组件设置样式

子组件也设置样式

父组件就会覆盖子组件相同的样式，
会保留父组件没有的样式

inheritAttrs 禁用特性继承

如果不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，我们可以通过组件的 this.$attrs 来获取这些属性。

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

2 组件的生命周期

组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法。

基本生命周期函数有下面几个阶段：

• 创建阶段
• 挂载阶段
• 更新阶段
• 卸载阶段
• 其它

每一个阶段都对应着 之前 和 之后 两个函数。

2-1 创建阶段

beforeCreate()

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。初始化阶段，应用不多。

created()

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

2-2 挂载阶段

beforeMount()

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted()

该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了 $el 属性，该阶段可以通过 DOM 操作来对组件内部元素进行处理了。

2-3 更新阶段

beforeUpdate()

数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态。

updated()

由于数据的变更导致的视图重新渲染，可以通过 DOM 操作来获取视图的最新状态。
任何数据的更新都会触发这个事件

.$nextTick()

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

与 updated 有些类似，this.$nextTick() 可以用作局部的数据更新后DOM更新结束后的操作，全局的可以用 updated 生命周期函数。

案例

利用alert阻断执行，来观察beforeUpdate和updated两种状态

    <div id="app"><my-component></my-component></div><script src="./js/vue.js"></script><script>Vue.component('my-component', {template: `<div>MyComponent<button @click="setA" ref="getA">{{a}}</button><button @click="setB" ref="getB">{{b}}</button><button @click="setC" ref="getC">{{c}}</button></div>`,data() {return {a: 1,b: 2,c: 100}},updated() {console.log('updated函数，此时页面已经更新，更新后的数据');console.log(this.$refs.getA.innerHTML);console.log(this.$refs.getB.innerHTML);console.log(this.$refs.getC.innerHTML);},methods: {setA() {// 数据变化不会立即渲染视图this.a++;console.log("更新前的数据", this.a, this.$refs.getA.innerHTML);alert("setA()改变数据，但是此时并未更新页面")},setB() {this.b++;console.log("更新前的数据：", this.b, this.$refs.getB.innerHTML);alert("setB()改变数据，但是此时并未更新页面")},setC() {this.c++;// 通过$nextTick回调函数中获取修改后的数据this.$nextTick(() => {alert("通过$nextTick回调函数中获取修改后的数据");console.log("获取修改后的数据", this.$refs.getC.innerHTML);});}}});new Vue({el: '#app',data: {}});</script>

点击1


点击100$nextTick

2-4 卸载阶段

beforeDestroy()

实例销毁之前调用，移除一些不必要的冗余数据，比如定时器。

定时器移除

    <div id="app"><button @click="isShow = !isShow">{{isShow}}</button><my-component v-if="isShow"></my-component></div><script src="./js/vue.js"></script><script>Vue.component('my-component', {template: `<div>MyComponent</div>`,created() {setInterval(() => {console.log(Math.random());}, 1000);},beforeDestroy() {console.log('beforeDestroy')},destroyed() {console.log('destroyed')}});new Vue({el: '#app',data: {isShow: true}});</script>

销毁了组件，但是定时器依然存在

通过设置定时器变量，在beforeDestroy阶段销毁定时器

destroyed()

Vue 实例销毁后调用。

2-5 errorCaptured()

当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：

1. 错误对象
2. 发生错误的组件实例
3. 以及一个包含错误来源信息的字符串。

此钩子可以返回 false 以阻止该错误继续向上传播。

设置错误时显示联系管理员

    <div id="app"><err-container><kkb-component></kkb-component></err-container></div><script src="./js/vue.js"></script><script>Vue.component('err-container', {data() {return {err: false}},template: `<div><slot v-if="!err"></slot><h1 v-else>请联系管理员！</h1></div>`,errorCaptured() {console.log('errorCaptured');this.err = true;}});Vue.component('kkb-component', {data() {return {a: 1}},// 调用一个不存在的属性template: `<div>组件{{a.b.c}}</div>`,});new Vue({el: '#app',data: {}});</script>

2-6 生命周期的一些使用场景

created 进行ajax请求异步数据的获取、初始化数据

mounted 挂载元素dom节点的获取

$nextTick 针对单一事件更新数据后立即操作dom

updated 任何数据的更新