（vue2）.sync修饰符、ref和$refs、$nextTick、自定义指令、插槽

.sync修饰符 实现子组件和父组件数据的双向绑定 ，简化代码

prop属性名，可以自定义，非固定value

本质：属性名和@update：属性名的合写

//等价于

//等价于

变化：

1v-model  ->  :自定义属性.sync

2子组件向父传值 的事件名'update：自定义属性'

ref和$refs

查找范围：当前组件内

Vue异步更新（提升性能）、$nextTick

this.$nextTick(()=>{
  this.$refs.inp.focus()
})

自定义指令 封装一些dom操作

全局注册：main.js中

Vue.directive('focus',{
  "inserted"(el){
    el.focus()
  }
})

局部注册：组件内部

directives:{
  "指令名":{
    inserted(){
      el.focus()
    }
  }
}

 v-loading指令封装

分析：

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

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

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

实现：1准备一个loading类，通过伪元素.loading:before{}定位（便于添加移除），设置宽高，实现蒙层

2添加loading类v-loading="isLoading",封装loading指令

inserted（el,binding）{bingding.value?el.classList.add('loading'):el.classList.remove('loading')}，update（el,binding）{bingding.value?el.classList.add('loading'):el.classList.remove('loading')}

插槽 让组件内部的一些结果支持自定义

组件内需要定制的结构部分用默认展示内容占位

使用组件时，传入的内容

v-slot:插槽名 = #header

插槽上可以绑定数据，给slot标签，以添加属性的方式传值