Vue3：组件高级（下）

Vue3：组件高级（下）

Date: May 25, 2023
Sum: ref引用、动态组件、插槽、自定义指令

---

目标：

◆ 能够知道如何使用 ref 引用 DOM 和组件实例

◆ 能够知道 $nextTick 的调用时机

◆ 能够说出 keep-alive 元素的作用

◆ 能够掌握插槽的基本用法

◆ 能够知道如何自定义指令

---

---

---

ref 引用

1. 什么是 ref 引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

案例：

效果：

---

1. 使用 ref 引用 DOM 元素

如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：

比如你想引用h1标题，那么你就可以这么写：

App 根组件

案例：

效果：

---

1. 使用 ref 引用组件实例

如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

具体步骤：

1. 使用ref属性，为对应的组件添加引用名称

案例：

效果：

1. 我们可以在button上面发现一个reset方法
2. 可以用button为counter组件中的count清零

---

4. 控制文本框和按钮的按需切换

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。

案例：

效果：

---

1. 让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。

示例代码如下：

效果：

点击按钮后，文本框消失，然后会报以下错误。

因为DOM元素的更新是异步更新，执行1后会立即执行2，从而希望拿到ipt这个引用对象。而此时DOM还没有完全更新完（就是文本框还没出来，我们就要它的ipt），显然不可能，故报错。

// 展示文本框
  this.inputVisible = true  //1
  // 获取到文本框的引用对象，然后调用 focus() 方法
  this.$refs.ipt.focus()  //2
}

---

6. this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 异步地重新渲染完成后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

显示 input 输入框

methods: {
  showinput() {
    // 展示文本框
    this.inputVisible = true
    // 把对 input 文本框的操作，推迟到下次DOM更新之后，否则页面上根本不存在文本框元素
    this.$nextTick(() => {
      this.$refs.ipt.focus()
    })
  }
},

---

---

---

动态组件

1. 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 组件，专门用来实现组件的动态渲染。

① 是组件的占位符

② 通过 is 属性动态指定要渲染的组件名称

③

1. 如何实现动态组件渲染

示例代码如下：

data() {
  return {
    comName: 'MyHome' // 1.当前要渲染的组件的名称
  }
},

注意：当我们切换组件时，之前组件会被销毁（所以之前的数据也会被清空）

1. 使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。

示例代码如下：

---

---

---

插槽

1. 什么是插槽

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

---

---

体验插槽的基础用法

在封装组件时，可以通过 元素定义插槽，从而为用户预留内容占位符。

示例代码如下：

MyCom.vue

App.vue

	
  
~~~用户自定义的内容~~~

没有预留插槽的内容会被丢弃

如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃。

示例代码如下：

MyCom.vue

App.vue

	
	
～～～用户自定义的内容～～～

后备内容
封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

示例代码如下：

---

---

具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。

示例代码如下：

MyCom.vue

注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。

---

为具名插槽提供内容

在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

示例代码如下：

---

具名插槽的简写形式

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header

---

---

作用域插槽

在封装组件的过程中，可以为预留的 插槽绑定 props 数据，这种带有 props 数据的 叫做“作用域插槽”。

示例代码如下：

MyCom.vue

App.vue

理解：App.vue通过scope来接收MyCom.vue传过来的数据。值得注意的是，我们这里一般通过scoped来接收数据。

效果：

---

解构作用域插槽的 Prop

作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。

示例代码如下：

---

声明作用域插槽

在封装 MyTable 组件的过程中，可以通过作用域插槽把表格每一行的数据传递给组件的使用者。示例代码如下：

---

使用作用域插槽

在使用 MyTable 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据。

示例代码如下：

效果：

---

---

---

自定义指令

1. 什么是自定义指令

vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。vue 中的自定义指令分为两类，分别是：私有自定义指令和全局自定义指令

1. 声明私有自定义指令的语法

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。

示例代码如下：

directives: {
    //  自定义一个私有指令
    focus: {
      // 当被绑定的元素插入到 DOM 中时，自动触发 mounted 函数
      mounted(el) {
        el.focus() // 让被绑定的元素自动获得焦点
      }
    }
  },

注意：自定义指令在使用的时候以v-开头，但是在声明的时候不需要加v-前缀

1. 使用自定义指令

在使用自定义指令时，需要加上 v- 前缀。

示例代码如下：

1. 声明全局自定义指令的语法

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明，示例代码如下：

const app = Vue.createApp({})

// 注册一个全局自定义指令 `v-focue`
app.directive('focus', {
	// 当被绑定的元素插入到 DOM 中时，自动触发 mounted 函数
	mounted(el) {
		// Focus the element
		el.focus()
	}
})

1. updated 函数

mounted 函数只在元素第一次插入 DOM 时被调用，当 DOM 更新时 mounted 函数不会被触发。 updated函数会在每次 DOM 更新完成后被调用。

示例代码如下：

app.directive('focus', {
	mounted(el) {  // 第一次插入 DOM 时触发这个函数
		el.focus()
	},
	updated(el) { // 每次 DOM 更新时都会触发 updated 函数
		el.focus()
	}
})

注意：在 vue2 的项目中使用自定义指令时，【 mounted -> bind 】【 updated -> update 】

1. 函数简写

如果 mounted 和updated 函数中的逻辑完全相同，则可以简写成如下格式：

app.directive('focus', (el) => {
	// 在 mounted 和 updated 时都会触发相同的业务处理
	el.focus()
})

1. 指令的参数值

在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值，示例代码如下：

{{ count }}

+1

//自定义 v-color 指令
app.directive('color', (el, binding) => {
  // binding.value 就是通过“等号”为指令绑定的值
  el.style.color = 
})

---

---

---

总结：

① 能够知道如何使用 ref 引用 DOM 和组件实例

通过 ref 属性指定引用的名称、使用 this.$refs 访问引用实例

② 能够知道 $nextTick 的调用时机

组件的 DOM 更新之后，才执行 $nextTick 中的回调

③ 能够说出 keep-alive 元素的作用

保持动态组件的状态

④ 能够掌握插槽的基本用法

标签、具名插槽、作用域插槽、v-slot: 简写为 #

⑤ 能够知道如何自定义指令

私有自定义指令、全局自定义指令