Vue-组件进阶和自定义指令

一、动态组件

• 可以让多个组件进行切换，同时只会显示一个组件
• <component :is="自定义"></component>
• 特征：显示某个组件，这个给件会创建，如果某个给件不显示了，这个给件会销毁

二、keep-alive

• 可以让组件被缓存，不被销毁 

<div style="border: 1px solid red;">
    <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

• 注意：缓存组不会执行 destroyed和beforDestroy钩子函数

三、组件插槽

• 可以允许组件的部分内容不会写死

默认插槽
<demo>内容</demo>
<slot>默认内容</slot>

具名插槽
<slot name="aa"></slot>
<demo><template #aa></template></demo>
<demo><template v-slot:aa></template></demo>

作用域插槽
<slot money="100"></slot>
<template v-slot="{money}"></template>

四、自定义指令

全局：
Vue.directive(指令名, { inserted(){}, update(){} })

局部：
directives: {名字: {}}

实例：
Vue.directive("focus", {
  inserted(el){
    el.focus()
  }
})