动态组件

1. 什么是动态组件

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

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

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

data() {
// 当前要渲染的组件名称return {comName: 'Right'}
}<!-- componet 标签是vue 内置的作用： 组件的占位符 -->
<!-- is 属性的值，表示要渲染的组件的名字 -->
<component :is="comName"></component><button @click="comName = 'Left'">展示 Left</button>
<button @click="comName = 'Right'">展示 Right</button>

3. 使用 keep-alive 保持状态

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

<!-- 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 指定哪些组件需要被缓存 -->
<!-- 或者， 可以通过 exclude 指定哪些组件不需要被缓存 不能同时使用两者-->
<keep-alive include="Left,Right"><component :is="comName"></component>
</keep-alive>

插槽

1. 什么是插槽

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

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

2. 体验插槽的基础用法

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

<template><p> Mycom1 组件第一个 p 标签</p><!-- 通过 slot 标签，为用户预留内容占位符（插槽）--><slot></slot><p> MyCom1 组件最后一个 p 标签 </p>
</template>

<my-com-1><!-- 在使用 Mycom1 组件时， 为插槽指定具体的内容 --><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 是一个作用域插槽 --><slot v-for="item in list" :user="item"></slot>
</tody>

4.1 使用作用域插槽

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

<my-com-3><!-- 1. 接收作用域插槽对外提供的数据 --><template v-slot:default="scope"><tr><!-- 2. 使用作用域插槽的数据 --><td>{{scope}}</td></tr></template>
</my-com-3>

4.2 解构插槽 Prop

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

<my-com-3><!-- v-slot: 可以简写成 # --><!-- 作用域插槽对外提供的数据对象，可以通过 解构赋值 简化接收的过程 --><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}}
}

8. 函数简写

如果 bind 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

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

9. 全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

// 参数1： 字符串，表示全局自定义指令的名字
// 参数2：对象，用来接收指令的参数值
Vue.directive('color', function(el, binding){el.style.color = binding.value
})

总结

① 能够掌握 keep-alive 元素的基本使用

• <keep-alive> 标签、include 属性
  ② 能够掌握插槽的基本用
• <slot> 标签、具名插槽、作用域插槽、后备内容
  ③ 能够知道如何自定义指令
• 私有自定义指令 directives: { }
• 全局自定义指令 Vue.directive()

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

1. 【Vue2.0】— 组件的自定义事件（十八）

   [Vue2.0]- 组件的自定义事件(十八) <template><div ><h2>{{msg}}</h2><!-- 通过父组件给子组件传递函数 ...

2. Vue2.x动态组件的使用实现组件整合大屏展示

   Vue2.x动态组件的使用实现组件整合大屏展示 一.问题 项目中开发多个可视化的页面(组件),现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内,并且根据配置数据划分占比以及位置关系(横 ...

3. VUE2第五天学习---自定义指令

   阅读目录 1.理解VUE中的自定义指令 回到顶部 1.理解VUE中的自定义指令 默认核心指令有 (v-model 和 v-show), 但是有时候我们需要用到自定义指令,在vue中,代码复用主要形式和 ...

4. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

    1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

5. 第十章：动态组件，插槽，自定义指令

   第十章:动态组件,插槽,自定义指令 本章任务 动态组件 插槽 自定义指令 vant UI 组件库 axios的配置 本章内容 动态组件 自定义指令 一.动态组件 1.1 什么是动态组件 概念:动态组件 ...

6. Day06_动态组件_插槽_自定义指令_tabbar案例

   Day06_动态组件_插槽_自定义指令_tabbar案例 文章目录 Day06_动态组件_插槽_自定义指令_tabbar案例 知识点自测 今日学习目标 1. 组件进阶 1.0 组件进阶 - 动态组件 ...

7. Vue基础学习笔记Day06_动态组件_插槽_自定义指令

   今日目标: 能够了解组件进阶知识 能够掌握自定义指令创建和使用 学习内容: 学习目录: 组件进阶 自定义指令 今日总结 面试题 知识点自测 组件创建, 注册和使用 - 伸手就来特别熟练 指令的作用 1 ...

8. Vue基础复习(2)Vue2.X过渡、动画和自定义指令

   vue2.X过渡&动画和自定义指令 1. 过渡效果 2. 动画效果 3. Vue内置指令 4. 自定义指令 vue2.X过渡&动画和自定义指令 transition(过渡) anima ...

9. Vue自定义指令原来这么简单

   本篇学习目标 能够了解组件进阶知识 能够掌握自定义指令创建和使用 能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点,并动态切换,这就是动 ...

最新文章

1. java.util.concurrent.Exchanger应用范例与原理浅析
2. 生存分析简介：Kaplan-Meier估计器
3. HONGJIN4 2013
4. 信息学奥赛一本通 2054：【例3.4】适合晨练
5. 【题解】BZOJ5093图的价值(二项式+NTT)
6. WPF简易北京地铁效果图
7. 智能移动项目打包发布经验交流
8. 文本数据增强（data augmentation）nlpaug使用
9. PickerView 使用
10. hadoop权威指南笔记
11. [编辑器]_从 VI 编辑器谈 FreeBSD 的前世今生以及编辑器本质
12. 计算机更换硬盘键盘鼠标不好使,安装win7时鼠标键盘不能用怎么办?(完美解决方法)...
13. 无线信道模型分类和建模方法介绍--附思维导图
14. word添加脚注后正文跑到下一页
15. 离散数学自反与反自反
16. 开源基于涂鸦模组和沁恒RISC-V 架构32位MCU的IOT物联网生活环境监测系统及涂鸦模组使用
17. scrapy案例：爬取京东笔记本数据
18. 集成学习（一）—— 机器学习基础
19. 网站底部的统计代码HTML
20. [0,1]上均匀分布随机数的产生

热门文章

1. PID：智能小车入门（位置式和增量式）
2. URL编码和Base64编码
3. HTML 语法规范及其基本结构标签
4. android音频文件存放目录,Android系统声音文件目录
5. 记录每天学习的新知识：AlarmManager 定时任务
6. Merriam-Webster's Vocabulary Builder 学习笔记 Unit 19
7. [概念]CSV逗号分隔值
8. 程序员对于35岁的担忧：未来真的没有什么好的前景吗？
9. 免费电子书籍下载站点大全(转载)
10. 苹果Arm芯片适配开发 （Apple Silicon）