vue基础笔记 组件插槽、$refs、$nextTick

1.插槽

1.1组件插槽

• 作用：让组件内的标签能动态传入。给组件插入什么标签，组件就显示什么标签。没传就用默认内容，传了就会替换
• 使用方法：
  1. 子组件内用slot标签占位
  2. 使用组件时pannel标签夹着的地方，传入标签替换slot。（pannel是子组件名）
  3. 如果外面不给传，就在slot标签内传入默认内容
     
     

1.2具名插槽

• 一个组件内有两处以上需要外部传入标签的地方
• 使用方法：
  1. 子组件内给slot标签设置name属性区分名字
  2. 父组件内template配合v-slot
  3. v-slot可以简写为 #插槽名
     
     

1.3作用域插槽

• 使用插槽时，想使用子组件内变量
• 使用方法：
  1. 子组件内给slot 绑定属性和子组件的值
  2. 父组件内template 配合v-slot
     
     

1.4具名插槽和作用域插槽一起使用

• 写法：v-slot:title=“scope”
• 简写：#title=“scope”

2.自定义指令-注册

• 当 Vue 内置指令无法满足需求时可以自定义
• 全局注册，写在main.js 里

//全局注册指令
//参数1：指令名称  不要v-
//参数2：配置对象
Vue.directive('foc',{
  // inserted函数
  //该函数会自动调用
  //当被该指令绑定的标签插入到 DOM 树上时被执行。  在页面上显示时执行该函数
  //执行函数时会将指令绑定的标签元素传过来
  inserted(el){
    el.focus()
  }
})

• 局部注册，与data同级

directives:{
    foc:{//注册指令时被传入的配置对象
      inserted(el){
        el.focus()
      }
    }
  }

• 很少使用，一般使用全局注册

3.$refs

3.1获得原生DOM

• 使用方法：
  1. 在目标标签设置ref
  2. 在mounted函数里获取原生DOM，使用this.$refs.ref属性名
• 代码说明：

<template>
  <div>
    <!-- $refs 的使用 -->
    <!-- 1.先给要获取的元素设置一个属性 ref -->
    <h1 id="hh" ref="bigh1">1.ref和id获取原生DOM</h1>
  </div>
</template>
<script>
export default {
  mounted(){
    let h1 = document.querySelector('#hh')
    //2.在合适的地方使用 this.$refs
    let hiRef = this.$refs.bigh1
    console.log(h1);
    console.log(hiRef);
  }
};
</script>

3.2获取组件对象

• 使用方法：
  1. 在父组件使用子组件时，给标签添加ref属性
  2. 在mounted函数中获取组件对象。使用this.$refs.ref属性名

4.$nextTick

• 作用：data 中的数据改变, DOM 更新是异步执行的, 所以如果需要数据改变后立即获取最新的 DOM 元素, 就要借助该方法
• 用法：this.$nextTick(回调函数)
• 当 msg 修改后，Vue 内部监测到数据变化，要进行 DOM 重新渲染，但是，这个过程是异步的，更新 DOM 是异步的。data 中数据修改时同步的，但 DOM 更新是异步的
• $nextTick 内采用的是宏加微任务，根据情况选择宏任务或微任务 ，最新版本是纯微任务
• $ nextTick函数的参数是回调函数，回调函数在 DOM 更新后执行。this.$ nextTick 返 回值是一个promise 对象
• 代码说明：

<template>
  <div>
    <h1>3.$nextTick 的使用</h1>
    <p ref="cuteP">{{ msg }}</p>
    <button @click="changeMsg">点我修改p</button>
    <h1>4. $nextTick 使用场景</h1>
    <button @click="search" v-if="isShow">点我搜索</button>
    <input ref="inp" v-else type="text">
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:'我是一个p',
      isShow:true
    }
  },
  methods:{
    changeMsg(){
      this.msg = '我变丑了'
      console.log('changeMsg',this.$refs.cuteP.innerHTML);
      //总结：data 中数据修改时同步的，但 DOM 更新是异步的
      this.$nextTick(() => {
        //回调函数在 DOM 更新后执行
        console.log('$nextTick',this.$refs.cuteP.innerHTML);
      })
      //不建议使用该方法，效率太低了，这是宏任务
      setTimeout(() => {
        console.log('setTimeout',this.$refs.cuteP.innerHTML);
      },0)
    },
    async search(){
      this.isShow = false,
      // this.$nextTick(() => {
      //   this.$refs.inp.focus()
      // })
      //this.$nextTick 返回值是一个promise 对象
      await this.$nextTick()
      this.$refs.inp.focus()
    }
  },
};
</script>

5.v-model的本质

1. 给标签绑定一个 :value 属性
2. 给标签绑定一个 @input 事件, 事件处理函数中对数据进行赋值操作
3. v-model 就是一个语法糖, 帮我们完成了上述两件事情