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>
    

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年TI杯E题-三子棋游戏装置方案分享-jdk123团队-第四弹 第二题

往期回顾 前期准备 摄像头bug解决 手搓机械臂 视觉模块的封装 下面是题目部分&#xff1a; 第二问我们继续延续第一问的思路&#xff1a; 将棋子坐标与棋盘上标定的坐标进行绑定。 代码展示&#xff1a; import RPi.GPIO as GPIO import time import cv2 import numpy as…

【Qt】常用控件:按钮类控件

思维导图&#xff1a; 一、Push Button 我们可以使用 QPushButton 表示一个按钮&#xff0c;这也是当前我们最熟悉的一个控件。QPushButton继承于QAbstractButton。这个类是一个抽象类&#xff0c;是按钮的父类。 1.1 常用的属性 属性说明text按钮中的文本icon按钮中的图标ic…

Flutter登录界面使用主题

Now, let’s use the theme we initially created in our main function for a simple login screen: 现在&#xff0c;让我们使用最初在主函数中创建的主题来制作一个简单的登录屏幕&#xff1a; Create a Login Screen Widget: Inside the main.dartfile, create a new wid…

基于Springboot+Vue的候鸟监测数据管理系统 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 这个系…

MySQL 字段类型介绍

在 MySQL 中&#xff0c;设计数据库表时&#xff0c;需要根据数据的实际需求选择合适的数据类型&#xff0c;以确保数据存储的准确性和节省存储空间。MySQL 提供了丰富的字段类型&#xff0c;主要分为以下几类&#xff1a;数值类型、字符串类型、日期时间类型、和JSON类型等。 …

ffmpeg视频滤镜:定向模糊-dblur

滤镜简述 dblur 官网链接 > https://ffmpeg.org/ffmpeg-filters.html#dblur 有一个模糊滤镜&#xff0c;我试了一下&#xff0c;没有感觉到它的特殊之处, 这里简单介绍一下。 滤镜使用 滤镜的参数 angle <float> ..FV.....T. set angle (from 0 t…

019集——global全局引用报错解决方案(全局using指令在c#7.3中不可用)(CAD—C#二次开发入门)

如图&#xff0c;所示&#xff0c;全局引用global using出现报错&#xff1a; 解决方案如下&#xff1a; 新建一个类库&#xff0c;standard2.0版本。不要选.netframework 首先vs右下角更新vs版本 打开项目所在文件夹 找到项目文件.csproj&#xff0c;记事本打开。属性组位置加…

Go语言开发环境搭建

文档说明 本文作者:SwBack 创作时间:2022‎年‎6‎月‎8‎日 ‏‎18:46:21 知乎:https://www.zhihu.com/people/back-88-87 CSDN:https://blog.csdn.net/qq_30817059 百度搜索: SwBack系统: Windows 11 go 1.18.2 安装包下载 安装包下载链接 直接默认NEXT 查看Go版本 查看Go…

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 (二)

coppelia sim[V-REP]仿真实现 机器人于3D相机手眼标定与实时视觉追踪 二 zmq API接口python调用python获取3D相机的数据获取彩色相机的数据获取深度相机的数据用matpolit显示 python控制机器人运动直接控制轴的位置用IK运动学直接移动到末端姿态 相机内参的标定记录拍照点的位置…

Java面向对象编程高阶(一)

Java面向对象编程高阶&#xff08;一&#xff09; 一、关键字static1、static修饰属性2、静态变量与实例变量的对比3、static修饰方法4、什么时候将属性声明为静态的&#xff1f;5、什么时候将属性声明为静态的&#xff1f;6、代码演示 一、关键字static static用来修饰的结构…

Javaee---多线程(一)

文章目录 1.线程的概念2.休眠里面的异常处理3.实现runnable接口4.匿名内部类子类创建线程5.匿名内部类接口创建线程6.基于lambda表达式进行线程创建7.关于Thread的其他的使用方法7.1线程的名字7.2设置为前台线程7.3判断线程是否存活 8.创建线程方法总结9.start方法10.终止&…

VAE中的“变分”什么

写在前面 VAE&#xff08;Variational Autoencoder&#xff09;&#xff0c;中文译为变分自编码器。其中AE&#xff08;Autoencoder&#xff09;很好理解。那“变分”指的是什么呢?—其实是“变分推断”。变分推断主要用在VAE的损失函数中&#xff0c;那变分推断是什么&#x…

MobileNetV2实现实时口罩检测tensorflow

项目源码获取方式见文章末尾&#xff01; 回复暗号&#xff1a;13&#xff0c;免费获取600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 **《------往期经典推荐------》**项目名称 1.【Informer模型复现项目实战】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【…

著名AI人工智能的未来应用讲师培训师唐兴通数字经济大数据工业4.0数字化转型AIGC大模型培训讲师

《大数据与人工智能的未来应用》培训课程大纲 一、培训内容简介 本课程旨在帮助学员深度理解大数据与人工智能&#xff08;AI&#xff09;如何为未来商业和行业带来革命性变革。课程紧贴前沿科技&#xff0c;从数据采集、分析到AI应用开发&#xff0c;全方位解析大数据和AI如…

51c~目标检测~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/12377509 一、总结 这里概述了基于深度学习的目标检测器的最新发展。同时&#xff0c;还提供了目标检测任务的基准数据集和评估指标的简要概述&#xff0c;以及在识别任务中使用的一些高性能基础架构&#xff0c;其还涵盖了…

Docker | images镜像的常用命令总结

命令总结 1. 帮助启动类命令基本命令systemctl status dockerdocker infodocker --help 2. 镜像命令docker images删除镜像出现错误 docker searchdocker pull xxx[:TAG]docker images -adocker images -qdocker system dfdocker rmi -f xxxxxdocker rmi -f $(docker images -q…

Qt 学习第十四天:线程与多线程

1024程序员快乐&#xff0c;如果这博客让你学习到了知识&#xff0c;请给我一个免费的赞❤️ 父子线程演示 一、创建界面文件 LCDnumber 二、创建mythread类&#xff0c;继承QObject 三、在MyThread.h文件做修改&#xff0c;并且加上函数声明 引入头文件&#xff0c;改变继…

实战:大数据冷热分析

实战&#xff1a;大数据冷热分析 冷热分析&#xff08;Hot and Cold Data Analysis&#xff09;的目的主要在于优化存储系统的性能和成本。通过识别并区分访问频率和存储需求不同的数据&#xff0c;可以采取适当的存储策略&#xff0c;进而提高系统的效率和用户体验。终极目的…

javaScript整数反转

function _reverse(number) { // 补全代码 return (number ).split().reverse().join(); } number &#xff1a;首先&#xff0c;将数字 number 转换为字符串。在 JavaScript 中&#xff0c;当你将一个数字与一个字符串相加时&#xff0c;JavaScript 会自动将数字转换为字符串…

PyTorch中如何进行向量微分、矩阵微分、计算雅各比行列式

文章目录 摘要Abstract 一、计算雅各比行列式二、向量微分三、矩阵微分总结 摘要 本文介绍了在PyTorch中进行向量微分、矩阵微分以及计算雅各比行列式的方法。通过对自动微分&#xff08;Autograd&#xff09;功能的讲解&#xff0c;展示了如何轻松实现复杂的数学运算&#xf…