动态组件-插槽

1.动态组件
目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件
场景：: 同一个挂载点要切换 不同组件 显示

1. 创建要被切换的组件 - 标签+样式
2. 引入到要展示的vue文件内, 注册
3. 变量-承载要显示的组件名
4. 设置挂载点
5. 点击按钮-切换comName的值为要显示的组件名
   小结：vue内置component组件, 配合is属性, 设置要显示的组件名字
   1.1组件缓存
   目标：组件切换会导致组件被频繁销毁和重新创建, 性能不高
   补充生命周期:

• activated - 激活
• deactivated - 失去激活状态
  小结：keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法
  1.2激活和非激活
  目标被缓存的组件不再创建和销毁, 而是激活和非激活
  activated – 激活时触发
  deactivated – 失去激活状态触发
  1.3组件插槽
  目标： 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容。
  口诀

6. 组件内用<slot></slot>占位
7. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

1.4插槽默认内容
目标：如果外面不给传, 想给个默认显示内容
口诀：<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示
1.5具名插槽
目标：当一个组件内有2处以上需要外部传入标签的地方
小结： v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签
1.6作用域插槽
目标：子组件里值, 在给插槽赋值时在父组件环境下使用
口诀：
1.子组件, 在slot上绑定属性和子组件内的值
8. 使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
9. scope变量名自动绑定slot上所有属性和值

2自定义指令
目标：获取标签, 扩展额外的功能

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

2.1自定义指令-传值

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