自定义指令

基本指令为我们实现某些功能而简化了操作，我们同样可以自定义指令，封装DOM操作来扩展额外的功能。

全局注册

// 写在main.js
Vue.diretive("指令名", {
    // 元素被加入页面时inserted触发
  inserted (el, binding) {
    // 对el标签，扩展额外功能
    // binding.value就是指令的值
  },
  // 指令的值被修改触发
  update (el, binding) {
  // 值变化后DOM更新的逻辑
  }
))
// 使用时v-指令名

局部注册

// 写在对应的组件
directives: {
  "指令名": {
    inserted (el, binding) {
     // 对el标签，扩展额外功能
    }
  }
}

插槽

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

默认插槽

<!--组件内部在需要待定的位置，使用slot进行占位-->
<slot>
     <!--这里面的是默认值，当未传入数据出现-->
    <p>我是默认值<p> 
</slot>

<!--使用组件时，组件在组件标签内填写-->
 <three-div>  
 <!--three-div只是我随便写的，根据具体改就行-->
      <p>就是这样</p>
 </three-div>

具名插槽

<!--说白了就是给插槽命名，方便获取对应的插槽-->
<slot name="frist"></slot>
<slot name="second"></slot>

 <three-div>  
 <!-- v-slot:可以简写为# -->
     <template #first>
     </template>
     <template #second>
     </template>
 </three-div>

作用域插槽

通过作用域插槽进行传值绑定

<slot id="1" msg="我是值"></slot>

<three-div>  
<!--默认插槽通过#default="obj"接收传递的对象 -->
     <template #default="obj">
     <!-- obj.id就是id-->
     </template>
 </three-div>

Vue知识整理——自定义指令与插槽

自定义指令

插槽