Vue2基础七、ref&nextTick&自定义指令

零、文章目录

Vue2基础七、ref&nextTick&自定义指令

1、ref

• **作用：**利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例
• **特点：**查找范围 → 当前组件内 (更精确稳定)，用document.querySelect(‘.box’) 获取的是整个页面中的盒子

（1）获取 dom

• 目标标签 – 添加 ref 属性

<div ref="chartRef">我是渲染图表的容器div>

• 恰当时机, 通过 this.$refs.xxx, 获取目标标签

mounted () {
   console.log(this.$refs.chartRef)
},

（2）获取组件

• 目标组件 – 添加 ref 属性

• 恰当时机, 通过 this.$refs.xxx, 获取目标组件，就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法()

（3）代码演示

• 安装echart包

yarn add echarts

• 父组件App.vue

• 子组件BaseChart.vue

• 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WmBy90dR-1690447474327)(https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307131641861.png)]

2、nextTick

（1）异步更新问题

• 需求：编辑标题, 编辑框自动聚焦

  • 点击编辑，显示编辑框
  • 让编辑框，立刻获取焦点

  this.isShowEdit = true // 显示输入框
  this.$refs.inp.focus() // 获取焦点
  

• 问题：“显示之后”，立刻获取焦点是不能成功的！

• 原因：Vue 是 异步更新 DOM (提升性能)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BdzLqJY-1690447474329)(https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307131654743.png)]

（2）$nextTick解决问题

• $nextTick：等 DOM 更新后, 才会触发执行此方法里的函数体
• 语法: this.$nextTick(函数体)

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

• 注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例

（3）代码实现

3、自定义指令

（1）指令分类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJamBXtu-1690447474330)(https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307141042338.png)]

（2）自定义指令

• 自定义指令：自己定义的指令, 可以封装一些 dom 操作， 扩展额外功能

• 自定义指令语法：

  • 全局注册

  //在main.js中
  // 1. 全局注册指令
  Vue.directive('focus', {
    // inserted 会在 指令所在的元素，被插入到页面中时触发
    inserted (el) {
      // el 就是指令所绑定的元素
      // console.log(el);
      el.focus()
    }
  })
  

  • 局部注册

  //在Vue组件的配置项中
  directives: {
    "指令名": {
      inserted () {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }
    }
  }
  

  • 使用指令

    • 在使用指令的时候，一定要先注册，再使用，否则会报错
    • 使用指令语法： v-指令名。如：
    • 注册指令时不用加v-前缀，使用时要加v-前缀

    <input v-focus type="text">
    

  • 指令中的配置项介绍

    • inserted：被绑定元素插入父节点时调用的钩子函数
    • el：使用指令的那个DOM元素

• 完整代码实现：

  • 需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）

（3）自定义指令的值

• 需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

• 语法：

  • v-指令名 = "指令值" ，通过 等号 可以绑定指令的值

  <div v-color="color">我是内容div>
  

  • 通过 binding.value 可以拿到指令值，通过 update 钩子，可以监听指令值的变化，进行dom更新操作

  directives: {
    color: {
      inserted (el, binding) {
        el.style.color = binding.value
      },
      update (el, binding) {
        el.style.color = binding.value
      }
    }
  }
  

• 完整代码实现：

（4）v-loading 指令封装

• 场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好
• 需求：封装一个 v-loading 指令，实现加载中的效果

• 分析：

  • 本质 loading 效果就是一个蒙层，盖在了盒子上
  • 数据请求中，开启loading状态，添加蒙层
  • 数据请求完毕，关闭loading状态，移除蒙层

• 实现思路：

  • 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层
  • 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可
  • 结合自定义指令的语法进行封装复用

• 代码实现：