100字范文 > 【vue2】05_动态组件插槽自定义指令

【vue2】05_动态组件插槽自定义指令

时间：2023-12-17 06:41:07

文章目录

动态组件1. 什么是动态组件2. 如何实现动态组件渲染3. 使用 keep-alive 保持状态4. keep-alive 对应的生命周期函数5. keep-alive 的 include 属性插槽1. 什么是插槽2. 体验插槽的基础用法2.1 没有预留插槽的内容会被丢弃2.2 后备内容3. 具名插槽3.1 为具名插槽提供内容3.2 具名插槽的简写形式4. 作用域插槽4.1 使用作用域插槽4.2 解构插槽 Prop自定义指令1. 什么是自定义指令2. 自定义指令的分类3. 私有自定义指令4. 使用自定义指令5. 为自定义指令`动态绑定参数值`6. 通过 `binding `获取指令的参数值7. update 函数8. 函数简写9. 全局自定义指令总结

动态组件

1. 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。

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

vue 提供了一个内置的<component>组件，专门用来实现动态组件的渲染。示例代码如下：

data() {// 当前要渲染的组件名称return {comName: 'Right'}}<component :is="comName"></component><button @click="comName = 'Left'">展示 Left</button><button @click="comName = 'Right'">展示 Right</button>

3. 使用 keep-alive 保持状态

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

件的状态。示例代码如下：

<keep-alive><component :is="comName"></component></keep-alive>

4. keep-alive 对应的生命周期函数

当组件被缓存时，会自动触发组件的deactivated生命周期函数。

当组件被激活时，会自动触发组件的activated生命周期函数。

export default {created() {console.log('left 组件被创建了')},destroyed() {console.log('left 组件被销毁了')},activated() {console.log('组件被激活了，activated')},deactivated() {console.log('组件被缓存了，deactivated')}}

5. keep-alive 的 include 属性

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：

<keep-alive include="Left,Right"><component :is="comName"></component></keep-alive>

插槽

1. 什么是插槽

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

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

2. 体验插槽的基础用法

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。示例代码如下：

<template><p> Mycom1 组件第一个 p 标签</p><slot></slot><p> MyCom1 组件最后一个 p 标签 </p></template>

<my-com-1><p> 自定义内容</p></my-com-1>

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

如果在封装组件时没有预留任何 <slot> 插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下：

<template><p> Mycom1 组件第一个 p 标签</p><slot></slot><p> MyCom1 组件最后一个 p 标签 </p></template>

<my-com-1><p> 自定义内容</p></my-com-1>

2.2 后备内容

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

内容，则后备内容会生效。示例代码如下：

<template><p> Mycom1 组件第一个 p 标签</p><slot>这是后备内容</slot><p> MyCom1 组件最后一个 p 标签 </p></template>

3. 具名插槽

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

<div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>

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

3.1 为具名插槽提供内容

在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot指令，并以v-slot 的参数的形式提供其名称。示例代码如下：

<my-com-2><template v-slot:header><h1> 腾王阁序</h1></template><template v-slot:default><p> 豫章故郡，洪都新府</p><p> 。。。</p></template><template v-slot:footer><p> 作者：王勃</p></template></my-com-2>

3.2 具名插槽的简写形式

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

<my-com-2><template #header><h1> 腾王阁序</h1></template><template #default><p> 豫章故郡，洪都新府</p><p> 。。。</p></template><template #footer><p> 作者：王勃</p></template></my-com-2>

4. 作用域插槽

在封装组件的过程中，可以为预留的<slot>插槽绑定props 数据，这种带有props 数据的<slot>叫做“作用域插槽”。示例代码如下：

<tbody><slot v-for="item in list" :user="item"></slot></tody>

4.1 使用作用域插槽

可以使用v-slot:的形式，接收作用域插槽对外提供的数据。示例代码如下：

<my-com-3><template v-slot:default="scope"><tr><td>{{scope}}</td></tr></template></my-com-3>

4.2 解构插槽 Prop

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

<my-com-3><template #default="{user}"><tr><td>{{user.id}}</td><td>{{user.name}}</td></tr></template></my-com-3>

自定义指令

1. 什么是自定义指令

vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令.

2. 自定义指令的分类

vue 中的自定义指令分为两类，分别是：

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

3. 私有自定义指令

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

// 私有自定义指令的节点directives: {// 定义名为 color 的指令，指向一个配置对象// 形参中的 el 表示当前指令所绑定到的那个 DOM 对象color: {bind(el) {el.style.color = 'red'}}}

4. 使用自定义指令

在使用自定义指令时，需要加上v-前缀。示例代码如下：

// 声明自定义指令时，指令的名字是 color// 使用自定义指令时，需要加上 v- 指令前缀<h1 v-color>显示红色</h1>

5. 为自定义指令`动态绑定参数值`

在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值：

data() {return {color: 'red'// 定义 color 颜色值}}// 在使用指令时，动态为当前指令绑定参数值 color<h1 v-color='color'>App 组件 </h1>

6. 通过`binding`获取指令的参数值

在声明自定义指令时，可以通过形参中的`第二个参数``，来接收指令的参数值：

// 私有自定义指令的节点directives: {color: {bind(el, binding) {// 通过binding 对象的 .value 属性，获取动态的参数值el.style.color = binding.value}}}

7. update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函

数会在每次 DOM 更新时被调用。示例代码如下：

directives: {color: {// 当指令第一次被绑定到元素时被调用bind(el, binding) {el.style.color = binding.value},// 每次DOM 更新时被调用update(el, binding) {el.style.color = binding.value}}}