thirty-one

动态组件

动态切换组件的显示和隐藏

如何实现动态组件的渲染

vue提供了有一个内置的<component>组件，专门用来实现动态组件的渲染。示例代码如下：

使用keep-alive保持状态

（可以把内部的组件进行缓存，而不是销毁组件）

keep-alive对应的生命周期函数

（对组件进行缓存）

当组件被缓存是，会自动触发组件的deactivated生命周期函数。

当组件被激活时，会自动触发组件的activated生命周期函数。

keep-alive的include属性

(include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔)

exclude（排除不缓存的组件）

插槽

插槽（Slot）是vue为组件的封装者提供的能力。运行开发者再封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

（vue官方规定，每一个slot插槽，都要有一个name名称，如果省略了slot的name属性，则有一个默认名称叫做default）

v-slot：插槽名（v-slot：的简写为#）

把内容填充到指定名称的插槽中。

只能用在template标签上。

template这个标签，他是一个虚拟标签，只起到包裹性质，但是，不会被渲染为任何性质的html元素。

后备内容

封装组件时，可以为预留的<slot>插槽提供后背内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后背内容会生效。

具名插槽

带名字的插槽就是具名插槽。

作用域插槽

在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做“作用域插槽”

自定义指令

vue官方提供了v-text、v-for、v-model、v-if等常用的指令。初次之外vue还允许开发者自定义指令。

自定义指令的分类

·私有自定义指令

·全局自定义指令

私有自定义指令

在directives节点下声明私有自定义指令。

bind缺点：只能第一次触发时执行，无法更新。

update缺点：第一次不生效，之后生效。

函数简写

如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

全局自定义指令

全局共享的自定义指令需要通过“Vue.directive（）”进行声明。（全局声明的对象要放到main.js中）