Vue3:组件高级(下)
Date: May 25, 2023
Sum: ref引用、动态组件、插槽、自定义指令
目标:
◆ 能够知道如何使用 ref 引用 DOM 和组件实例
◆ 能够知道 $nextTick 的调用时机
◆ 能够说出 keep-alive 元素的作用
◆ 能够掌握插槽的基本用法
◆ 能够知道如何自定义指令
ref 引用
1.什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。
每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的 $refs 指向一个空对象。
案例:
<template> <div> <h1>App 根组件</h1> <hr/> <button type="button" class="btn btn-primary" @click="getRefs">获取 $ref 引用</button> </div> </template> <script> export default { name: 'MyApp', methods: { getRefs() { console.log(this); // this 代表当前组件的实例对象, this.$refs 默认指向空对象 } } } </script>
效果:
1.使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素,则可以按照如下的方式进行操作:
比如你想引用h1标题,那么你就可以这么写:<h1 ref="myh1">App 根组件</h1>
案例:
<template> <div> <h1 ref="myh1">App 根组件</h1> <hr/> <button @click="getRefs">获取 $ref 引用</button> </div> </template> <script> export default { name: 'MyApp', methods: { getRefs() { // 通过 this.$refs.引用的名称 可以获取到DOM元素的引用 console.log(this); // 操作DOM元素,把文本颜色改为红色 this.$refs.myh1.style.color = 'red' } } } </script>
效果:
1.使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例,则可以按照如下的方式进行操作:
具体步骤:
1.使用ref属性,为对应的组件添加引用名称
案例:
<template> <div> <h1>App 根组件</h1> <!-- 使用ref属性,为对应的组件添加引用名称 --> <button @click="getRefs">获取 $ref 引用</button> <hr> <my-counter ref="counterRef"></my-counter> </div> </template> <script> import MyCounter from './Counter.vue' export default { name: 'MyApp', methods: { getRefs() { // 通过 this.$refs 引用的名称 可以引用组件的实例 // 引用到组件的实例之后,就可以调用组件上的methods方法 this.$refs.counterRef.reset() } }, components: { MyCounter, } } </script>
效果:
1.我们可以在button上面发现一个reset方法
2.可以用button为counter组件中的count清零
4. 控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。
案例:
<template> <div> <h1>App 根组件</h1> <hr/> <input type="text" v-if="inputVisible"> <button v-else @click="showinput">显示 input 输入框</button> </div> </template> <script> export default { name: 'MyApp', data() { return { inputVisible: false, } }, methods: { showinput() { this.inputVisible = true } }, } </script>
效果:
1.让文本框自动获得焦点
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的.focus() 方法即可。
示例代码如下:
<template> <div> <h1>App 根组件</h1> <hr/> <input type="text" v-if="inputVisible" ref="ipt"> <button v-else @click="showinput">显示 input 输入框</button> </div> </template> <script> export default { name: 'MyApp', data() { return { inputVisible: false, } }, methods: { showinput() { // 展示文本框 this.inputVisible = true // 获取到文本框的引用对象,然后调用 focus() 方法 this.$refs.ipt.focus() } }, } </script>
效果:
点击按钮后,文本框消失,然后会报以下错误。
因为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 type="text" v-if="inputVisible" ref="ipt"> <button v-else @click="showinput">显示 input 输入框</button> methods: { showinput() { // 展示文本框 this.inputVisible = true // 把对 input 文本框的操作,推迟到下次DOM更新之后,否则页面上根本不存在文本框元素 this.$nextTick(() => { this.$refs.ipt.focus() }) } },
动态组件
1.什么是动态组件
动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 组件,专门用来实现组件的动态渲染。
① 是组件的占位符
② 通过 is 属性动态指定要渲染的组件名称
③
1.如何实现动态组件渲染
示例代码如下:
data() { return { comName: 'MyHome' // 1.当前要渲染的组件的名称 } }, <template> <div> <h1 class="mb-4">App 根组件</h1> <!-- 点击按钮,动态切换组件的名称 --> <button @click="comName = 'MyHome'">首页</button> <button @click="comName = 'MyMovie'">电影</button> <hr /> <!-- 2.用is来指定需要渲染的组件的名字 --> <component :is="comName"></component> </div> </template>
注意:当我们切换组件时,之前组件会被销毁(所以之前的数据也会被清空)
1.使用 keep-alive 保持状态
默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。
示例代码如下:
<keep-alive> <component :is="comName"></component> </keep-alive>
插槽
1.什么是插槽
插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间,为用户预留的内容的占位符。
体验插槽的基础用法
在封装组件时,可以通过 元素定义插槽,从而为用户预留内容占位符。
示例代码如下:
MyCom.vue
<template> <p>这是第一个p标签</p> <!-- 通过 slot 标签,为用户预留内容占位符(插槽) --> <slot></slot> <p>这是最后一个p标签</p> </template>
App.vue
<!-- 使用组件 --> <my-com> <!-- 在使用MyCom1 组件时, 为插槽指定具体的内容---> <p>~~~用户自定义的内容~~~</p> </my-com>
没有预留插槽的内容会被丢弃
如果在封装组件时没有预留任何 插槽,则用户提供的任何自定义内容都会被丢弃。
示例代码如下:
MyCom.vue
<template> <p>这是第一个p标签</p> <!-- 封装组件时,没有预留任何插槽 --> <p>这是最后一个p标签</p> </template>
App.vue
<my-com-1> <!-- 自定义的内容会被丢弃 --> <p>~~~用户自定义的内容~~~<p> </my-com-1>
后备内容
封装组件时,可以为预留的 插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容,则后备内容会生效。
示例代码如下:
<template> <p>这是第一个p标签</p> <slot>这是后备内容</slot> <p>这是最后一个p标签</p> </template>
具名插槽
如果在封装组件时需要预留多个插槽节点,则需要为每个 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。
示例代码如下:
MyCom.vue
<template> <div> <header> <!-- 我们希望把页头放这里 --> <slot name="header"></slot> </header> <main> <!-- 我们希望把主要内容放这里 --> <slot></slot> </main> <footer> <!-- 我们希望把页脚放这里 --> <slot name="footer"></slot> </footer> </div> </template>
注意:没有指定 name 名称的插槽,会有隐含的名称叫做 “default”。
为具名插槽提供内容
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。
示例代码如下:
<template> <div> <h1>App 根组件</h1> <hr/> <!-- 使用组件 --> <my-com> <template v-slot:header> <h1>滕王阁序</h1> </template> <template v-slot:default> <p>test1</p> <p>test2</p> <p>test3</p> </template> <template v-slot:footer> <p>落款:王勃</p> </template> </my-com> </div> </template>
具名插槽的简写形式
跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header
<template> <div> <h1>App 根组件</h1> <hr/> <!-- 使用组件 --> <my-com> <template #header> <h1>滕王阁序</h1> </template> <template #default> <p>test1</p> <p>test2</p> <p>test3</p> </template> <template #footer> <p>落款:王勃</p> </template> </my-com> </div> </template>
作用域插槽
在封装组件的过程中,可以为预留的 插槽绑定 props 数据,这种带有 props 数据的 叫做“作用域插槽”。
示例代码如下:
MyCom.vue
<template> <div> <h3>这是 TEST 组件</h3> <slot :info="infomation" :msg="message"></slot> </div> </template> <script> export default { name: 'MyCom', data() { return { information: { phone: '138XXXXX6666', address: '中国北京' }, message: 'abc', } } } </script>
App.vue
<template> <div> <h1>App 根组件</h1> <hr /> <!-- 使用自定义组件 --> <my-com v-slot:default="scope"> <p>{{ scope }}</p> </my-com> </div> </template>
理解:App.vue通过scope来接收MyCom.vue传过来的数据。值得注意的是,我们这里一般通过scoped来接收数据。
效果:
解构作用域插槽的 Prop
作用域插槽对外提供的数据对象,可以使用解构赋值简化数据的接收过程。
示例代码如下:
<template> <div> <h1>App 根组件</h1> <hr /> <!-- 作用域插槽对外提供的数据对象,可以通过“解构赋值”简化接收的过程 --> <my-com> <template #default="{ user, msg }"> <!-- [使用] 作用域插槽的数据 --> <p>{{ user.name }}</p> <p>{{ msg }}</p> </template> </my-com> </div> </template>
声明作用域插槽
在封装 MyTable 组件的过程中,可以通过作用域插槽把表格每一行的数据传递给组件的使用者。示例代码如下:
<!-- 表格主体区域 --> <tbody> <!-- 循环渲染表格数据 --> <tr v-for="item in list" :key="item.id"> <!-- 下面的 slot 是一个【作用域插槽】 --> <slot :user="item"></slot> </tr> </tbody>
使用作用域插槽
在使用 MyTable 组件时,自定义单元格的渲染方式,并接收作用域插槽对外提供的数据。
示例代码如下:
<!-- 使用自定义组件 --> <my-table> <!-- 【接收】作用域插槽对外提供的数据 --> <template #default="{ user }"> <!-- 【使用】作用域插槽的数据 --> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td> <input type="checkbox" :checked="user.state"> </td> </template> </my-table>
效果:
自定义指令
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- 前缀。
示例代码如下:
<!-- 声明自定义指令时,指令的名字是 focus --> <!-- 使用自定义指令时,需要加上 v- 指令前缀 --> <input v-focus />
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.指令的参数值
在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值,示例代码如下:
<!-- 在使用 v-color 指令时, 可以通过“等号”绑定指令的值 --> <input type="text" v-model.number="count" v-focus v-color="'red'"> <p v-color="'cyan'">{{ count }}</p> <button @click="count++">+1</button> //自定义 v-color 指令 app.directive('color', (el, binding) => { // binding.value 就是通过“等号”为指令绑定的值 el.style.color = <binding class="value"></binding> })
总结:
① 能够知道如何使用 ref 引用 DOM 和组件实例
通过 ref 属性指定引用的名称、使用 this.$refs 访问引用实例
② 能够知道 $nextTick 的调用时机
组件的 DOM 更新之后,才执行 $nextTick 中的回调
③ 能够说出 keep-alive 元素的作用
保持动态组件的状态
④ 能够掌握插槽的基本用法
标签、具名插槽、作用域插槽、v-slot: 简写为 #
⑤ 能够知道如何自定义指令
私有自定义指令、全局自定义指令