Vue自定义指令，插槽

自己定义指令，可以封装一些dom操作

1.全局注册

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

2.局部注册

//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}

<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
    <h1 v-color="color1">指令的值1</h1>
    <h1 v-color="color2">指令的值2</h1>
  </div>
</template>

<script>
export default {
  // mounted(){
  //   this.$refs.inp.focus()
  // }
  data(){
    return{
      color1:'red',
      color2:'green'
    }
  },

  // 局部注册指令
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    },
    color:{
      // inserted 提供的是元素被添加到页面中时的逻辑
      inserted(el,binding){
        // console.log(el)
        // binding.value就是属性的值
        el.style.color=binding.value
      },
      // update指令的值修改的时候触发，提供值变化后dom更新的逻辑
      update(el,binding){
        el.style.color=binding.value
      }
    }
  }
}
</script>

<style>

</style>

3.v-loading指令封装

1.本质 loading效果就是一个蒙层，盖在了盒子上

2.数据请求中，开启loading状态，添加蒙层

3.数据请求完毕，关闭loading状态，移除蒙层

4.插槽

1.默认插槽

让组件内部的一些 **结构** 支持 **自定义**

基本语法 

1. 组件内需要定制的结构部分，改用<slot></slot>占位

2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

3. 给插槽传入内容时，可以传入纯文本、html标签、组件

 <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 使用slot占位 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>

  <div>
    <MyDialog>
      你干嘛~
    </MyDialog>
  </div>

2.后备插槽（默认值）

封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。

在 <slot> 标签内，放置内容, 作为默认显示内容

3.具名插槽

对多处结构进行定制

1.多个slot使用name属性区分名字

2.template配合v-slot:名字来分发对应标签

 v-slot: 可以简写成 #：

4.作用域插槽

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用

给 slot 标签, 以 添加属性的方式传值

所有添加的属性, 都会被收集到一个对象中

在template中, 通过  ` #插槽名= "obj"` 接收，默认插槽名为 default