动态组件，组件插槽，自定义指令

1.动态组件

1.0基本使用

<component :is='comName'></component>

点击改变:is的值

1.1性能不高，每次切换都会销毁和重生组件

解决：用<keep-alive></keep-alive>包裹，解决组件销毁和重生问题，产生组件缓存

1.2 激活和非激活

两个钩子函数：

activated 激活时触发

deactivated 失去激活时触发

2.组件插槽

1.0基本使用

用<slot></slot>占位，使用时用在组件标签中传入标签结构，

slot标签内可以放默认标签，使用时传入了标签结构就用传入的，没传就用默认的

1.1具名插槽

<slot name='test'></slot>给slot标签起名

<templete #test></templete>

<templete v-slot:test></templete>

使用，当然也在组件标签中

v-slot: 简写成 #

1.2作用域插槽

默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

1. 子组件, 在slot上绑定属性和子组件内的值

2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

3. scope变量名自动绑定slot上所有属性和值

1.3自定义指令

局部注册

 directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }

全局注册

Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

传值

Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
})