Vue动态组件、插槽、自定义指令

动态组件

语法：

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

import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
    data(){
        return {
            comName: "UserName"
        }
    },
    components: {
        UserName,
        UserInfo
    }
}

引入组件之后，不使用组件标签，使用代替，通过设置is的名称来切换组件

组件缓存

组件切换会导致组件被频繁销毁和重新创建, 性能不高
使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

 <keep-alive>
        <component :is="comName"></component>
    </keep-alive>

keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法
activated、deactivated生命周期函数，在组件激活、失活时触发

组件插槽

用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

语法口诀:

1. 组件内用占位
2. 使用组件时夹着的地方, 传入标签替换slot（Pannel：引入组件时自定义的标签名）

插槽可设置默认内容
在slot标签内写入默认内容，当使用组件时未自定义内容时，会显示默认内容

具名插槽
当一个组件内有2处以上需要外部传入标签的地方，传入的标签可以分别派发给不同的slot位置
v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

<slot name="content"></slot>
--------------------------------------------------------------------------------------
<template v-slot:content>
          <img src="../assets/mm.gif" alt="">
          <span>我是内容</span>
</template>

作用域插槽
子组件里值, 在给插槽赋值时在父组件环境下使用

<slot :row="defaultObj">{{ defaultObj.defaultOne }}</slot>
// row 和 scope 都是可以自定义的
 <template v-slot="scope">
          <p>{{ scope.row.defaultTwo }}</p>
 </template>

自定义指令

局部注册：

<input type="text" v-focus>
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
}

全局注册：

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

自定义指令-传值

<p v-color="colorStr" @click="changeColor">修改文字颜色</p>

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