.sync修饰符 实现子组件和父组件数据的双向绑定 ，简化代码
prop属性名，可以自定义，非固定value
本质：属性名和@update：属性名的合写
<BaseDialog :value="isShow" @update="isShow=$event">
//等价于
<BaseDialog v-model="isShow=$event"><BaseDialog :visible="isShow" @update:visible="isShow=$event">
//等价于
<BaseDialog :visible.sync="isShow">变化：
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')}
插槽 让组件内部的一些结果支持自定义
组件内需要定制的结构部分用<slot name="header">默认展示内容</slot>占位
使用组件时，<Mydialog #header>传入的内容</Mydialog>
v-slot:插槽名 = #header
插槽上可以绑定数据，给slot标签，以添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot><template #default="obj">
//默认插槽名为default,所有被添加的属性，都会被收集到一个obj对象中<button @click="del(obj.id)">删除</button>
</template>
