当前位置: 首页 > news >正文

Vue2自定义指令及插槽

这里写目录标题

  • 自定义指令
    • 基础语法
    • 指令的值
    • 封装v-loading指令
  • 插槽
    • 默认插槽
    • 后备内容(插槽的默认值)
    • 具名插槽
    • 作用域插槽

自定义指令

自定义指令:自己定义的指令,封装一些dom操作,扩展额外功能

基础语法

  1. 全局注册:
Vue.directive('指令名', {"inserted" (el) {<!-- 可以对el标签,扩展额外功能 -->el.focus()}
})
  1. 局部注册:
dierctives: {"指令名": {inserted () {<!-- 可以对el标签扩展额外功能 -->el.focus()}}
}

使用时:<input v-指令名 type="text"/>

指令的值

需求:实现一个color指令-传入不同的颜色,给标签设置文字颜色

  • 语法:在绑定指令时,通过等号的形式为指令绑定具体的参数值
    <div v-color="color">我是内容</div>
  • 通过binding.value可以拿到指令值,指令值修改时会触发update函数
    在这里插入图片描述

实现实际需求:在这里插入图片描述

【注意】:inserted提供的是元素被添加到页面当中的逻辑,要使修改指令后页面更新,需要编写update指令的逻辑

封装v-loading指令

需求:实际开发中,发送请求需要时间,在未请求到数据时页面处于空白状态 => 使用v-loading在这段时间添加动态加载效果

  • 实现步骤:
    1. 准备一个loading类,通过伪元素定位,设置宽高实现蒙层
    2. 开启关闭loading状态(添加移动封层),本质是添加移除类
    3. 结合自定义指令的语法进行封装复用

插槽

插槽的分类:
① 默认插槽(组件内定制一处插槽)
② 具名插槽(组件内定制多处插槽)

默认插槽

  • 基本语法
    1. 组件内需要定制的结构部分,改用<slot></slot>占位
    2. 使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot

后备内容(插槽的默认值)

写在<slot></slot>标签内的为插槽的后备内容,当在使用组件使没有传入<MyDialog></MyDialog>则会显示后备内容

具名插槽

  • 基本语法:
    1. 在slot标签中添加name属性
      eg:
    <slot name="color"></slot>
    <slot name="size"></slot>
    
    1. 在template标签中配合v-slot:名字来分发对应标签,简写方式:#名字
      eg:
    <MyDialog><template v-slot: color></template><template v-slot: size></template><!-- 简写 --><template #color></template><template #size></template>
    </MyDialog>
    

作用域插槽

  • 误区:作用域插槽不是插槽的一种分类,而是插槽的一个传参语法

  • 作用域插槽:定义slot插槽的同时,是可以传值的,给插槽上可以绑定数据,将来使用组件时可以用

  • 场景:封装表格组件

    1. 父传子,动态渲染表格内容
    2. 利用默认插槽,定制操作列
    3. 删除或查看都需要用到当前项的id,属于组件内部的数据,通过作用域插槽传值绑定,进而使用在这里插入图片描述
  • 基本使用步骤

    1. 给slot标签以添加标签属性的方式传值
      <slot :id="item.id msg="测试文本"></slot>
    2. 所有添加的属性,都会被收集到一个对象中
      { id: 3, msg: '测试文本'}
    3. 在template中,通过#插槽名="obj"接收,默认插槽名为default
    <MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></template>
    </MyTable>
    

相关文章:

Vue2自定义指令及插槽

这里写目录标题 自定义指令基础语法指令的值封装v-loading指令 插槽默认插槽后备内容&#xff08;插槽的默认值&#xff09;具名插槽作用域插槽 自定义指令 自定义指令&#xff1a;自己定义的指令&#xff0c;封装一些dom操作&#xff0c;扩展额外功能 基础语法 全局注册&am…...

【Qt】系统相关——多线程、Qt多线程介绍、常用函数、线程安全、网络、UDP Socket、TCP Socket

文章目录 Qt系统相关1. 多线程1.1 Qt多线程介绍1.2 常用函数1.3 线程安全 2. 网络2.1 UDP Socket2.2 TCP Socket Qt 系统相关 1. 多线程 1.1 Qt多线程介绍 QThread 代表一个在应用程序中可以独立控制的线程&#xff0c;它还可以和进程中的其他线程共享数据。QThread 对象管理…...

1GS/s 4通道14bit PCIE采集卡

1GS/s 4通道14bit PCIE采集卡是一款同时具备直流耦合程控放大器和双极性宽带信号输入的高速数据采集卡。板载FPGA具备实时信号处理能力&#xff0c;这些特性使其成为激光雷达、光纤传感、粒子物理等应用领域进行信号采集和分析的理想工具。提供快速的PCI Express 3.0 x8数据传输…...

动态IP是什么?

随着互联网成为人们生活的重要组成部分&#xff0c;以信息传递为主导的时代种&#xff0c;网络连接质量对我们的工作效率、学习进度以及娱乐体验等方面都有很大影响。 动态IP&#xff0c;作为网络连接中的一种重要IP代理形式&#xff0c;越来越受到用户的欢迎。本文将深入解析…...

51单片机完全学习——红外遥控

一、红外接收模块原理 红外接收头内部本身有一个反相&#xff0c;意思就是&#xff1a;平时发送方无信号时接收到的是1&#xff0c;发送方有发送载波时接收头引脚输出的是0&#xff0c;写代码的时候注意这一点。红外协议&#xff0c;你也可以理解成&#xff0c;他对0和1重新做…...

群控系统服务端开发模式-应用开发-业务架构逻辑开发BaseAPI

一、加密工具开发 首先在根目录下extend文件中创建Encipher文件夹&#xff0c;用于专门开发加解密工具&#xff0c;新建RSA算法控制器并命名为Encrypt.php。然后在根目录下config文件夹中创建rsa.php文件&#xff0c;用于配置RSA算法参数。 1、秘钥生成算法 <?php /*** RS…...

【AI日记】24.10.27 了解AI的未来

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 工作 工作1 内容&#xff1a;挑选AI大佬的访谈&#xff0c;跳着看了几个时间&#xff1a;2小时 工作2 内容&#xff1a;OpenAI Sam Altman最新访谈&#xff1a;GPT-4o和AI未来 2024.5时间&#xff1a;2小时收…...

【时间之外】IT人求职和创业应知【19】

认知决定你的赚钱能力。以下是今天可能影响你求职和创业的热点新闻&#xff1a; 今日关键字&#xff1a;深圳长沙&#xff08;备注&#xff1a;我都没有去过&#xff09; 2024中国&#xff08;长沙&#xff09;民营企业科技创新发展大会召开 内容概述&#xff1a; 2024年10月…...

MOE混合专家模型总结(面试)

目录 1. MOE介绍 2.MOE出现的背景 3.有哪些MOE模型 4.门控网络或路由 5.为什么门控网络要引入噪声 6.如何均衡专家间的负载 7.“专家”指什么 8.专家的数量对预训练有何影响 9.什么是topk门控 10.MOE模型的主要特点 11.MOE和稠密模型的对比 12.MOE的优势 13.MOE的挑…...

第8次CCF CSP认证真题解

1、最大波动 题目链接&#xff1a;https://sim.csp.thusaac.com/contest/8/problem/0 100分代码&#xff1a; #include <iostream> #include <algorithm> using namespace std; int main(int argc, char *argv[]) {int n;cin >> n;int a[1010];for(int i …...

2024昆明ICPC A. Two-star Contest(直观命名+详细注释)

Problem - A - Codeforces 思路&#xff1a; 按照等级排序&#xff0c;维护同等级最大评分&#xff0c;每个等级的总评分至少比其第前一个等级的最大评分大1分 吐槽&#xff1a; 思路不难&#xff0c;但坑好多&#xff0c;感觉全踩了一遍 坑&#xff1a;&#xff08;按解决…...

【算法刷题指南】双指针

&#x1f308;个人主页&#xff1a; 南桥几晴秋 &#x1f308;C专栏&#xff1a; 南桥谈C &#x1f308;C语言专栏&#xff1a; C语言学习系列 &#x1f308;Linux学习专栏&#xff1a; 南桥谈Linux &#x1f308;数据结构学习专栏&#xff1a; 数据结构杂谈 &#x1f308;数据…...

HTML,CSS,JavaScript三件套

前言 1.HTML 就是用来写网页的 就是超文本标记语言 1.1快速入门 标签是根标签&#xff0c;就是开始的地方 head就是头&#xff0c;加载一些资源信息&#xff0c;和展示title标题的地方&#xff0c;比如html快速入门那几个字就是title标题标签 body是身体&#xff0c;就是正…...

react 总结+复习+应用加深

文章目录 一、React生命周期1. 挂载阶段&#xff08;Mounting&#xff09;补充2. 更新阶段&#xff08;Updating&#xff09;补充 static getDerivedStateFromProps 更新阶段应用补充 getSnapshotBeforeUpdate3. 卸载阶段&#xff08;Unmounting&#xff09; 二、React组件间的…...

关于 API

关于 API $set 问法&#xff1a;有没有遇到过数据更新了但视图没有更新的情况&#xff1f; <template><div>{{arr}}<button click"btn"></button></div> </template><script> export default {name:"Home"da…...

第15次CCF CSP真题解

1、小明上学 题目链接&#xff1a;https://sim.csp.thusaac.com/contest/15/problem/0 本题是模拟红绿灯计时的题&#xff0c;根据红绿灯转换规则可知&#xff0c;红灯后面通常是绿灯&#xff0c;绿灯后面是黄灯&#xff0c;黄灯过后又是红灯。根据题意&#xff0c;当k 0时&…...

STM32硬件平台

STM32 系列是 STMicroelectronics 设计的高度灵活、广泛应用的微控制器&#xff08;MCU&#xff09;系列&#xff0c;支持从低功耗应用到高性能处理的需求&#xff0c;适用于工业、汽车、消费电子和物联网等广泛领域。STM32 系列具有广泛的硬件种类和丰富的功能&#xff0c;以下…...

一文讲明白大模型分布式逻辑(从GPU通信原语到Megatron、Deepspeed)

1. 背景介绍 如果你拿到了两台8卡A100的机器&#xff08;做梦&#xff09;&#xff0c;你的导师让你学习部署并且训练不同尺寸的大模型&#xff0c;并且写一个说明文档。你意识到&#xff0c;你最需要学习的就是关于分布式训练的知识&#xff0c;因为你可是第一次接触这么多卡…...

【人工智能-初级】第6章 决策树和随机森林:浅显易懂的介绍及Python实践

文章目录 一、决策树简介二、决策树的构建原理2.1 决策树的优缺点优点缺点 三、随机森林简介3.1 随机森林的构建过程3.2 随机森林的优缺点优点缺点 四、Python实现决策树和随机森林4.1 导入必要的库4.2 加载数据集并进行预处理4.3 创建决策树模型并进行训练4.4 可视化决策树4.5…...

时间序列预测(九)——门控循环单元网络(GRU)

目录 一、GRU结构 二、GRU核心思想 1、更新门&#xff08;Update Gate&#xff09;&#xff1a;决定了当前时刻隐藏状态中旧状态和新候选状态的混合比例。 2、重置门&#xff08;Reset Gate&#xff09;&#xff1a;用于控制前一时刻隐藏状态对当前候选隐藏状态的影响程度。…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...