【Vue】ref引用,插槽

news2024/11/30 14:50:26

一、ref

什么是ref?

ref用来辅助开发者在不依赖于jQuery 的情况下,获取DOM元素或组件的引用。
每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用。默认情况下,组件的$refs 指向一个空对象


如何使用ref引用DOM属性 

想要获取哪个dom元素的引用,就为其设置ref属性,并取一个合法的名字,就可以通过this.$refs.引用名称.xxx就可以实现dom元素的引用和操作。


使用ref引用组件的实例

 父组件可以直接通过ref引用到子组件的方法,这可比子传父方便多了!!

之前没学ref和插槽,一直是通过emit来子传父,还得父组件监听对应子组件,非常麻烦。


使用ref实现控制文本框和按钮的按需切换

 

 

此时初始时,按钮显示,文本框隐藏;点击按钮可以隐藏按钮,显示文本框,但此时文本框并没有自动获得焦点,所以我们还需要使用ref引用自带的focus组件来使得文本框获得焦点。

添加ref属性

 

 按道理来讲这样子是没问题的,但实际操作之后会发现报错显示无法找到ipt实例

 

是因为,ref是异步执行的,当showInput方法中第一步执行完之后会立刻取获取ipt实例,但此时数据还没来得及渲染上去,所以无法获得ipt实例。

 那么如何解决这个问题呢?

this.$nextTick(cb)方法

 将前面的方法内部改成这个样子:

 即可成功渲染。


二、动态组件

什么是动态组件?

 

 


 使用keep-alive保持状态

 


 三、插槽

什么是插槽?

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

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

 基础用法示例:

 提示:没有预留插槽的内容会被丢弃,也就是说,如果在封装组件时没用预留任何的<slot>插槽,则用户提供的任何自定义内容都会被丢弃

相反,如果预留了插槽,但是没有设置插槽的内容,插槽位置也不会显示任何东西,所以我们可以为预留的<slot>插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容,则后备内容会生效。示例代码如下:


 具名插槽

 注意:没有指定name名称的插槽,会有隐含的名称叫做“default"

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

具名插槽的简写形式 

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


作用域插槽

解构赋值

可以只把所需要的数据传给父组件

 

 

封装主键的时候,如果不确定要渲染成什么样子,也可以使用作用域插槽把决定权交给使用者。


四、自定义指令

什么是自定义指令?

vue官方提供了v-for、v-model、v-if 等常用的内置指令。除此之外vue还允许开发者自定义指令。vue的自定义指令分为私有自定义指令和全局自定义指令。


声明私有自定义指令的语法

在每个vue组件中,可以在 directives 节点下声明私有自定义指令

 其中el就是该指令所绑定元素的dom对象。

其中mounted的调用时机就是被绑定的元素已经渲染到dom上之后就会自动触发。

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

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

相关文章

Ubuntu20.04下安装nvidia驱动

ubuntu-drivers devices会显示你的电脑上可用的nvidia驱动。只需要安装推荐的版本即可&#xff08;后面有recommend字样&#xff09; 打开电脑里的软件和更新app&#xff08;这里建议换提前换源&#xff0c;阿里源或者清华源&#xff09; 来到附加驱动这个页面&#xff0c;选…

HTML初识-概念和基本知识

1 . HTML初识-基础认知 HTML标签 1.1 目录 ◆ 基础认知 ◆ HTML标签学习 ◆ 综合案例 1.2 学习目标 ◆ 能够理解HTML的 基本语法 和标签的关系 ◆ 能够使用 排版标签 实现网页中标题、段落等效果 ◆ 能够使用 相对路径 选择不同目录下的文件 ◆ 能够使用 媒体标签 在网页中显示…

ES进阶教程

1.分片Shards 一个索引可以存储超出单个结点硬件限制的大量数据,es提供了将索引划分为多份的能力,每一份都称之为分片.当创建索引时,可以指定想要的分片数量.每个分片本身也是一个功能完善并且相对独立的索引.这个索引可以被放在集群中的任何结点上. 分片的重要性 1.允许水平切…

相控阵天线(九):平面阵列天线综合(不可分离型切比雪夫分布、圆口径泰勒综合、可分离型分布、配相抵消法)

目录简介不可分离型分布不可分离型切比雪夫圆口径泰勒综合可分离型分布可分离切比雪夫综合可分离泰勒综合平面阵列配相抵消法简介 按行、列排列的可分离型矩形平面阵&#xff0c;其阵因子是两个正交排列的直线阵阵因子的乘积。可分离的平面阵方向图在两个主面内是满足预期副瓣…

Docker创建Spring容器【方便服务迁移】

&#x1f4c3;目录跳转&#x1f4da;简介&#xff1a;&#x1f383; 1.上传jar包&#x1f389;2.创建Dockerfile文件&#x1f5fa;️3.生成容器&#x1f365;4.查看本地镜像&#x1f680;5.运行镜像&#x1f52d;6.使用工具访问接口&#x1f3c6;总结&#x1f4da;简介&#xf…

网上预约挂号系统的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

si9000 单端(线)差分(动)线板层结构与阻抗计算

常见的单端(线)阻抗计算模式&#xff1a; Surface Microstrip 1B 在下图(表面&#xff0c;或暴露&#xff0c;微带)信号线暴露(空气)和参考电源或接地平面。根据电介质相对于迹的排列(在迹的下方或上方)对结构进行分类。下图显示了在信号轨迹(指定为1B)以下使用单一介电层的表…

elasticsearch数据存储结构,springboot集成elasticsearch

一、数据存储结构 结合数据库的结构理解起来就会比较清楚&#xff1a; 1&#xff09;索引&#xff08;Index&#xff09;>数据库&#xff08;Database&#xff09;。 2&#xff09;类型&#xff08;Type&#xff09;>表&#xff08;Table&#xff09;。 3&#xff09;文档…

Ubuntu 20.04.05安装PCL-1.12.0

1、安装QT-5.9.9 链接: Ubuntu20.04安装、配置、使用、卸载QT5.9.9以及第一个编写QT程序. 或者 链接: 在ubuntu用命令安装和卸载qt4、qt5(亲测有效). 2、安装VTK-7.1.1PCL-1.12.0 链接: ubuntu20.04下安装pcl. 或者 链接: PCL1.12VTK7.1.1 && Ubuntu20.04.3VSCode(官…

Python一炮句搞定网页登录验证码自动输入

前言&#xff1a;本来是“账号密码”的登录方式&#xff0c;突然就增加了验证码输入&#xff0c;还30秒一变。 查看元素 链接为一个png图片文件&#xff0c;每半分钟一更新&#xff0c;意思就是慢了还不行。 思路&#xff1a;&#xff2f;&#xff23;&#xff32;识别图片中的…

【并发】Java并发线程池底层原理详解与源码分析(下)

【并发】Java并发线程池底层原理详解与源码分析&#xff08;下&#xff09; 前情回顾 上篇文章地址 【并发】Java并发线程池底层原理详解与源码分析&#xff08;上&#xff09;_面向鸿蒙编程的博客-CSDN博客线程池不允许使用 Executors 去创建&#xff0c;而是通过 ThreadPo…

浅析数据迁移工具Sqoop

title: Sqoop系列 第一章 Sqoop理论 1.1 概述 sqoop 是 apache 旗下一款“Hadoop 和关系数据库服务器之间传送数据”的工具。 导入&#xff08;Import&#xff09;数据&#xff1a;MySQL&#xff0c;Oracle 导入数据到 Hadoop 的 HDFS、HIVE、HBASE 等数据存储系统 导出&…

八、Gateway

文章目录一、Gateway网关1.网关的作用二、配置网关1.创建gateway模块2.引入依赖3.编写application.yml4.启动gateway模块&#xff0c;查看是否能访问user-service服务三、路由断言工厂Route Predicate Factory四、GatewayFilter&#xff08;过滤器&#xff09;1.添加过滤器方式…

IDEA2022用maven创建的Servlet项目

因为博主太菜太笨&#xff0c;总是记不住大佬教的步骤&#xff0c;写一篇博客记录一下。 有什么不对&#xff0c;或者疑惑可以请假这位大佬&#xff08;没错就是那个被我问烦的大佬&#xff09;ljj大佬 第一步&#xff1a;新建maven 新建Project 选择webapp 初始界面需要等待…

S32K144之ADC

一&#xff0c;S32K144的ADC介绍 1&#xff0c;ADC模块特性 S32K14x和S32K14xW包含两个12位ADC模块&#xff0c;ADC0和ADC1。 S32K11x包含一个12位的ADC模块&#xff0c;ADC0。 不同封装&#xff0c;ADC0和ADC1所包含的通道数不一样&#xff0c;LQFP100来说ADC0和ADC1分别有16…

Spark - RDD 算子介绍及使用 Scala、Java、Python 三种语言演示

一、RDD 的起源 在 RDD 出现之前, 当时 MapReduce 是比较主流的, 而 MapReduce 如何执行流程如下&#xff1a; 多个 MapReduce 任务之间只能通过磁盘来进行传递数据&#xff0c;很明显的效率低下&#xff0c;再来看 RDD 的处理方式&#xff1a; 整个过程是共享内存的, 而不需…

利用pycharm调试ssh远程程序,并实时同步文件

或许你的服务器由于设置问题&#xff0c;不能通过Vscode进行远程调试python程序&#xff0c;那么本篇文章提供了利用pycharm远程调试程序的方法&#xff0c;且使用的编译器可以是服务器中的虚拟环境的编译器&#xff0c;可以实时同步本地与服务器的文件内容。希望对你能够有所帮…

【Oracle系列1】Oracle 的connect权限和create session的区别

【Oracle系列1】Oracle 的connect权限和create session的区别 背景 oracle数据库新建用户之后是无法登录的&#xff0c;需要赋予connect角色或者create session权限。 注意&#xff1a; connect是角色不是权限&#xff0c;create session是权限不是角色。角色是权限的集合。…

c++中的结构体

结构体&#xff1a;属于用户自定义的数据类型&#xff0c;允许用户存储不同的数据类型 语法&#xff1a;struct 结构体名 {结构体成员列表}&#xff1b;通过结构体创建变量的三种方式&#xff1a;1、struct 结构体名 变量名2、struct 结构体名 变量名{成员1值&#xff0c;成员…

第一个Shader程序

shader 很复杂&#xff0c;我学习的过程中也确实感受到了&#xff0c;需要会数学、图形学、编程语法等等知识。不如让我们直接看看 Shader 到底是什么&#xff1f;直接应用起来。或许没有那么复杂。 1、在场景中新建一个正方体&#xff0c;如下图 2、在 project 面板下新建一…