v-model语法糖、ref和$refs(vue操作dom)、$nextTick、dynamic、自定义指令、slot

1.v-model语法糖

v-model本质上是 value属性和input事件的一层包装，v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件，很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model

1.< input type="text" :value="msg" @input="msg = $event.target.value" />   

2. <input type="text" v-model="msg" /> 

这两者用法相同

2.ref和$refs(vue操作dom)

在vue中我们通常使用ref和$refs来获取dom元素，正常用法是

1.给标签添加自定义属性red :<button ref="属性名"></button>

2.通过 vm.$refs.属性名 获取该标签 this.$refs.属性名.sayHi();

3.$nextTick

vue更新DOM是一个异步的过程。异步代码需要等当前队列同步代码全部执行完毕之后才会执行$nextTick本质上是一个promise异步函数，会在dom元素获取之后执行。 

4.dynamic

什么是动态组件: 让多个组件使用同一个挂载点，并动态切换，这就是动态组件。 通过设置组件名，让一个挂载点可以切换不同的组件

<component :is="组件名"></component>

5.自定义指令

局部注册：只能在当前组件使用

添加一个自定义指令 v-focus,作用是让input表单自动聚焦

 <input type="text" v-focus/>
 directives: {
    //1.指令名:  focus
    focus: {
      // inserted(el) :  当指令被使用的时候会执行一次
      inserted(el) {
        //el : 你的指令写在哪一个标签上，这个el就是标签dom对象
        el.focus()
      },

全局注册： 在main.js中注册，任何地方可用

Vue.directive("focus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

6.slot

1.插槽作用：父组件 传递 html结构 给 子组件

2.具名插槽作用：父组件 传递 多个html结构 给 子组件

3.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

插槽的本质是html的结构替换

（1）匿名插槽

（2）具名插槽       具名插槽: <template v-slot:name值></slot>

给插槽slot添加name属性，在需要替换插槽的位置用v-slot或者#来调用

（3）作用域插槽        作用域插槽: <template v-slot="对象名"></slot>

插槽与props的异同点

相同点： 都是父传子

不同点：

props: 传递的是数据

插槽：传递的是html结构。

作用域插槽和$emit异同点

相同点：都是子传父

不同点：

$emit : 子传父的数据通过事件来接收

作用域插槽：子传父的数据是通过插槽v-slot接收 （子传父的数据，只能给插槽用）

.作用域插槽语法如下

给子组件的<slot>添加一个自定义属性 : <slot :属性名="属性值" ></slot>

给父组件的<template>添加v-slot属性接收数据: <template v-slot="对象名"></template>