Vue - 第五天 动态组件 插槽 自定义指令

news2024/11/18 9:21:43

动态组件& 插槽& 自定义指令

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

一、动态组件

1.什么是动态组件

动态组件是指在应用程序运行时动态加载和卸载的组件。通常，组件在应用程序启动时就已经加载了，但是在某些情况下，我们可能需要动态地加载组件，例如当某些组件只有在特定条件下才需要使用时。

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

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

在这里插入图片描述

<template>
	<!-- 2 通过is属性，动态指定要渲染的组件 -->
	<component :is="comName"></component>
	
	<!-- 3 点击按钮，动态切换组件 -->
	 <button @click="comName= 'Left'">展示左组件</button>
     <button @click="comName= 'Right'">展示右组件</button>
</template>

<script>
// 引入子组件
import Left from './components/Left.vue';
import Right from './components/Right.vue';
export default {
  // 根组件的数据
  data() {
    return {
      comName: '', // 记录当前显示的子组件名称
    }
  },
  // 引入子组件
  components: {
    Left,
    Right
  }
}
</script>

3.使用 keep-alive 保持状态

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

 <!-- 使用 keep-alive 包裹动态组件，实现组件缓存 -->
      <KeepAlive>
        <component :is="currentComponent"></component>
      </KeepAlive>

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

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。
在这里插入图片描述

在这里插入图片描述

5. keep-alive 的 include 属性

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

在这里插入图片描述

<KeepAlive include="MyLeft,MyRight">
        <component :is="comName"></component>
 </KeepAlive>

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

6.动态展示左右组件

最终实现效果，在展示右组件时，左组件被缓存，计数器数据得到保存。

<template>
  <!-- 根组件模板 -->
  <div class="app-container">
    <!-- 根组件内容 -->
    <h1>App 根组件</h1>
    <hr />

    <!-- 切换展示子组件的按钮 -->
    <button @click="currentComponent = 'Left'">展示左组件</button>
    <button @click="currentComponent = 'Right'">展示右组件</button>

    <!-- 渲染子组件的容器 -->
    <div class="box">
      <!-- 使用 keep-alive 包裹动态组件，实现组件缓存 -->
      <KeepAlive exclude="myRight">

        <!-- 动态组件，根据 currentComponent 的值渲染不同的子组件 -->
        <component :is="currentComponent"></component>
      </KeepAlive>

    </div>
  </div>
</template>

<script>
// 引入子组件
import Left from './components/Left.vue';
import Right from './components/Right.vue';
export default {
  // 根组件的数据
  data() {
    return {
      currentComponent: '', // 记录当前显示的子组件名称
    }
  },
  // 引入子组件
  components: {
    Left,
    Right
  }
}
</script>

<style scoped>
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}

.box {
  display: flex;
}
</style>

7.例子

二、插槽

1.什么是插槽

插槽 （Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的 、希望由用户指定的部分定义为插槽。
在这里插入图片描述
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

2.体验插槽的基础用法

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

      <Left>
        <p> 内容会被显示</p>
      </Left>

<template>
  <div class="left-container">
    <h3>Left 组件</h3>

    <slot></slot>
  </div>
</template>

在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.2 后备内容（默认内容）

封装组件时，可以为预留的<slot> 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：
在这里插入图片描述
在这里插入图片描述

3.具名插槽

如果在封装组件时需要预留多个插槽节点 ，则需要为每个<slot> 插槽指定具体的 name 名称 。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下：
在这里插入图片描述
注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”

<template>
    <div class="article-container">
      <h3 v-color="'red'">Article 组件</h3>
      <!-- 文章的标题 -->
      <div class="header-box">
        <slot name="title"></slot>
      </div>
  
      <!-- 文章的内容 -->
      <div class="content-box">
     
        <slot name="content"></slot>
      </div>
  
      <!-- 文章的作者 -->
      <div class="footer-box">
        <slot name="author"></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    // 首字母要大写
    name: 'Article',
  }
  </script>
  
  <style lang="less" scoped>
  .article-container {
    > div {
      min-height: 150px;
    }
    .header-box {
      background-color: pink;
    }
    .content-box {
      background-color: lightblue;
    }
    .footer-box {
      background-color: lightsalmon;
    }
  }
  </style>

3.1 为具名插槽提供内容

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

3.2 具名插槽的简写形式

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

在这里插入图片描述

app.vue

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />


    <div class="box">
      <!-- <Left>
       
      </Left> -->

      <Article>
        <template #title>
          <h1>腾王阁序</h1>
        </template>

        <template v-slot:content>
          <p>豫章故郡，洪都新府</p>
          <p>星分翼轸，地接衡庐</p>
          <p>襟三江而带五湖，控蛮荆而引瓯越</p>
        </template>

        <template #author>
          <p>作者：王勃</p>
        </template>
      </Article>

    </div>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Article from './components/Article.vue';

export default {

  components: {
    Left,
    Article,
  }
}
</script>

<style scoped>
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}

.box {
  display: flex;
}
</style>


article.vue
<template>
    <div class="article-container">
      <h3 >Article 组件</h3>
      <!-- 文章的标题 -->
      <div class="header-box">
        <slot name="title"></slot>
      </div>
  
      <!-- 文章的内容 -->
      <div class="content-box">
     
        <slot name="content"></slot>
      </div>
  
      <!-- 文章的作者 -->
      <div class="footer-box">
        <slot name="author"></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    // 首字母要大写
    name: 'Article',
  }
  </script>
  
  <style lang="less" scoped>
  .article-container {
    flex: 1;
    > div {
      min-height: 150px;
    }
    .header-box {
      background-color: pink;
    }
    .content-box {
      background-color: lightblue;
    }
    .footer-box {
      background-color: lightsalmon;
    }
  }
  </style>

4.作用域插槽

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

4.1 使用作域插槽

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

在这里插入图片描述

4.2 解构插槽 Prop

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

在这里插入图片描述

在这里插入图片描述

5.例子

三、自定义指令

1.什么是自定义指令

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

2. 自定义指令的分类

vue 中的自定义指令分为两类，分别是：
⚫ 私有自定义指令
⚫ 全局自定义指令

3.私有自定义指令

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

在这里插入图片描述

export default { 
  directives:{
    color:{
      bind(el){
        el.style.color='red'
      }
    }
  }
 }

4. 使用自定义指令

在使用自定义指令时，需要加上 v- 前缀。示例代码如下：
在这里插入图片描述

在这里插入图片描述

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

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

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

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

在这里插入图片描述

7. update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。示例代码如下：
在这里插入图片描述

8. 函数简写

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

在这里插入图片描述

9. 全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/634060.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VGGNet

VGGNet

论文信息 论文名称&#xff1a;Very Deep Convolutional Networks For Large-Scale Image Recognition 论文地址&#xff1a;https://arxiv.org/pdf/1409.1556.pdf 发表期刊&#xff1a; ICLR 发表年份&#xff1a; 2015 论文详情&#xff1a;VGGNet是2014年ILSVRC&#xff08…
阅读更多...
【并发篇】04-05 线程池核心参数代码演示

【并发篇】04-05 线程池核心参数代码演示

B站 黑马程序员 java八股的视频笔记 自留备忘 如有错误请多多指教。 &#xff08;一&#xff09;理论知识 这道题其实就是在问java中线程池的实现类ThreadPoolExecutor&#xff0c;这个类参数最多的构造方法有7个参数。 线程池本质上就是管理一组线程&#xff0c;用来执行提交…
阅读更多...
python:消除已安装库在import导入时出现红线问题

python:消除已安装库在import导入时出现红线问题

问题 在pycharm中&#xff0c;对于已经安装的库文件&#xff0c;在进行import导入时出现红线&#xff0c;不影响运行&#xff0c; 简单有效的消除红线的方法。 解决办法 在工程目录中的程序可以采用Mark directory - Source Root方法。 对于安装的第三方库文件环境不在本工程…
阅读更多...
springboot实现后端防重复提交（AOP+redis分布式锁）单机情况下

springboot实现后端防重复提交（AOP+redis分布式锁）单机情况下

文章目录 0、依赖1、自定义接口2、实现redis分布式锁3、自定义AOP4、测试 为什么要实现这个功能呢&#xff0c;可能用户在提交一份数据后&#xff0c;可能因为网络的原因、处理数据的速度慢等原因导致页面没有及时将用户刚提交数据的后台处理结果展示给用户&#xff0c;这时用户…
阅读更多...
LayoutTransformer: Layout Generation and Completion with Self-attention

LayoutTransformer: Layout Generation and Completion with Self-attention

LayoutTransformer: Layout Generation and Completion with Self-attention (Paper reading) Kamal Gupta, University of Maryland, US, Cited:41, Code, Paper 1. 前言 我们解决了在各种领域中&#xff08;如图像、移动应用、文档和3D对象&#xff09;进行场景布局生成的…
阅读更多...
后台管理系统模板 - zhadminvue

后台管理系统模板 - zhadminvue

没事的时候写了一个后台管理系统模板&#xff1a;zhadminvue&#xff0c;欢迎大家提issue和PR&#xff0c;以及想要添加一些有意思的功能模块&#xff0c;在没事的时候我也会加进去~ github:https://github.com/iotzzh/zh-admin-vue gitee: https://gitee.com/iotzzh/zh-admin.…
阅读更多...
算法模板（4）：动态规划（1）

算法模板（4）：动态规划（1）

动态规划 闫氏 d p dp dp 分析法&#xff1a; 集合&#xff1a;怎么划分。通常以集合的划分来定义数组。 f ( i , j ) f(i, j) f(i,j)&#xff1a;选前 i i i 个物品. 体积不超过 j j j。全部初始化为 0 0 0&#xff1b; j j j 非负时状态才合法。体积恰好是 j j j。 f…
阅读更多...
Springboot集成magic-api

Springboot集成magic-api

目录 1、前言 2、springboot集成magic-api 2.1、添加maven依赖 2.2、application.yml配置 2.3、编写测试接口 2.4、启动程序&#xff0c;访问接口 2.5、magic-api脚本 3、magic-api其他语法 4、注意事项 1、前言 今天项目中遇到一个问题&#xff0c;springboot后端项目…
阅读更多...
《机器学习算法竞赛实战》-chapter3数据探索

《机器学习算法竞赛实战》-chapter3数据探索

《机器学习算法竞赛实战》学习笔记&#xff0c;记录一下自己的学习过程&#xff0c;详细的内容请大家购买作者的书籍查阅。 数据探索 数据探索是竞赛的核心模块之一&#xff0c;贯穿竞赛始终&#xff0c;也是很多竞赛胜利的关键。 在竞赛中如何确保自己准备好竞赛使用的算法模…
阅读更多...
cmake 添加一个库

cmake 添加一个库

目录 项目格式 cmake基本语法 添加库 链接库 添加库的头文件 cmake打印字符串 库的cmake文件 cmake生辰库 mian函数中使用 让库成为可选的 cmake基本语法 设置option变量 cmake设置条件链接库 链接库 添加头文件 修改cmake配置文件 修改引用的源码 项目格式 …
阅读更多...
MM32F3273G8P火龙果开发板MindSDK开发教程12 -获取msa311加速器的敲击事件

MM32F3273G8P火龙果开发板MindSDK开发教程12 -获取msa311加速器的敲击事件

MM32F3273G8P火龙果开发板MindSDK开发教程12 -获取msa311加速器的敲击事件 1、功能描述 msa311可以识别单击、双击事件&#xff0c;类似手机上的点击返回&#xff0c;双击截屏功能。 单击&#xff0c;双击都能产生中断事件。 中断事件产生后&#xff0c;从对应的状态寄存器读…
阅读更多...
算法模板（4）：动态规划（3） 做题积累（1）

算法模板（4）：动态规划（3） 做题积累（1）

动态规划 1. 背包 1. 1024. 装箱问题 题意&#xff1a;有一个箱子容量为 V&#xff0c;同时有 n 个物品&#xff0c;每个物品有一个体积&#xff08;正整数&#xff09;。要求 n 个物品中&#xff0c;任取若干个装入箱内&#xff0c;使箱子的剩余空间为最小。别学那么死板。…
阅读更多...
2023夏-PAT甲级题解

2023夏-PAT甲级题解

目录 总结&#xff1a; A-1 Trap Input Specification: Output Specification: Sample Input: Sample Output: 题意&#xff1a; 思路&#xff1a; AC代码&#xff1a; A-2 Queue Using Two Stacks Input Specification: Output Specification: Sample Input: Sa…
阅读更多...
SpringBoot 项目部署笔记

SpringBoot 项目部署笔记

1. 直接通过 jar 包部署 本地直接 build package 成 jar 包&#xff0c;上传至服务器 ps -ef|grep XXX #查找项目进程sudo kill -9 19727 #杀掉项目进程nohup sudo java -jar *.jar >> app.log & #后台运行 jar &代表让该命令在后台执行 3. 通过 Jenkins …
阅读更多...
pytorch笔记：conv2d

pytorch笔记：conv2d

来自B站视频&#xff0c;API查阅&#xff0c;TORCH.NN nn.conv2d 中一般 kernel_size 是小奇数&#xff0c;padding 设置为 k − 1 2 \frac{k-1}{2} 2k−1​&#xff08;实际上padding的是 k − 1 k-1 k−1&#xff0c;因为参数的意义是左右各padding&#xff09;&#xff0c;
阅读更多...
探索Xiotman：物联网软件架构的创新之路

探索Xiotman：物联网软件架构的创新之路

文章目录 探索Xiotman&#xff1a;物联网软件架构的创新之路什么是物联网什么是XiotmanXiotman的特点Xiotman的架构Xiotman的使用安装env工具获取源代码使用其他教程 Xiotman的开源地址 总结 探索Xiotman&#xff1a;物联网软件架构的创新之路 什么是物联网 &#x1f680;&am…
阅读更多...
高燃盛会全程回顾｜鸿雁加速推进数字转型之路

高燃盛会全程回顾｜鸿雁加速推进数字转型之路

6月10日&#xff0c;以“双翅齐振雁南飞”为主题的鸿雁电器数字化营销启动大会暨中山古镇鸿雁全屋智能体验中心开业庆典&#xff0c;在中山古镇华艺广场圆满落幕。 古镇镇长阮志力、华艺集团董事长区锦标、华艺广场总经理丁瑜、古镇灯饰传媒董事长曹利晖以及杭州鸿雁电器有限公…
阅读更多...
spring boot + xxl-job 分布式任务调度

spring boot + xxl-job 分布式任务调度

一、介绍 1、任务调度 1.1、什么是任务调度 我们可以先思考一下下面业务场景的解决方案&#xff1a; 某电商系统需要在每天上午10点&#xff0c;下午3点&#xff0c;晚上8点发放一批优惠券。某财务系统需要在每天上午10点前结算前一天的账单数据&#xff0c;统计汇总。某电…
阅读更多...
那年我头脑发热，选择了自动化，后来我掉入计算机的世界无法自拔

那年我头脑发热，选择了自动化，后来我掉入计算机的世界无法自拔

首先&#xff0c;小雅兰是22届高考考生&#xff0c;而且当时填报志愿也没有填报到计算机相关的专业去&#xff0c;小雅兰是自动化专业的学生&#xff0c;是由于一次偶然的机会&#xff0c;了解到了这个行业&#xff0c;对于写代码所带来的成就感&#xff0c;总之&#xff0c;我…
阅读更多...
Java013——常见进制以及转换

Java013——常见进制以及转换

一、常见进制 十进制 数字组成&#xff1a;0-9这十个数字组成&#xff0c;不能以0开头 进位规则&#xff1a;满10进1 int num1 10;//对应的十进制为10二进制 数字组成&#xff1a;0-1这两个数字组成&#xff0c;以0b或0B开头 进位规则&#xff1a;满2进1 int num2 0b1010;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023