vue中的 this.$refs,this.$emit,this.$store,this.$nextTick 的使用

this.$store

是vue用到了状态管理工具 vuex,就是一个保存全局数据的库。

this.$nextTick()

官方解释:在下次 DOM 更新循环结束之后执行延迟回调。
有些操作(比如 this.$refs)需要在确保DOM被渲染完成后才能调用成功,这样就需要写在 this.$nextTick() 里面了。

this.$refs

我们在标签或者组件上定义 ref属性,比如在el-form上定义 ref="form1",这样我们就可以使用this.$refs.form1.validate(...)来访问这个组件中定义的属性和方法,因为 Element-ui 为 el-form 定义了 validate 方法。

1、如果ref名称是动态的呢,即 this.$refs.refName ,而 refName 是个变量(比如函数的参数),此时需要使用中括号,即 this.$refs.[refName].xxx

2、如果使用的:ref="xxx"来定义的,则应该是 this.$refs.[refName][0].xxx

3、ref 是在渲染完成之后才会有的,因此在调用 this.$refs.refName.xxx 的时候要确保 refName 这个DOM已经被渲染出来了,最典型的就是 ueditor,我们需要在它被渲染出来之后才能去调用组件的 set 方法去填充编辑器的内容,但是你并不知道它什么时候能渲染成功,只能使用延迟的方式,比如 this.$nextTick(() => {}),或者 window.setTimeout(() => {}, 500)

4、同样的,由于 this.$refs 不是响应式的,如果通过它来访问标签或组件的属性,需要在 this.$nextTick(() => {}) 之内。

this.$emit

this.$emit()主要用于子组件像父组件传递事件与参数。
上面说到,父组件可以使用 this.$refs 访问子组件;这里的 this.$emit 就是子组件用来触发父组件的事件。

<body>
<div id="counter-event-example"><p>{{ total }}</p><button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body><script>Vue.component('button-counter', {template: '<button v-on:click="increment">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {increment: function () {this.counter += 1;this.$emit('increment', "参数"); // increment 是自定义的事件}}});new Vue({el: '#counter-event-example',data: {total: 0},methods: {incrementTotal: function (e) {this.total += 1;console.log(e);}}})
</script>

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

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

相关文章

JavaEE--小Demo

目录 下载包 配置 修改文件 pom.xml application.properties 创建文件 HelloApi.java GreetingController.java Greeting.java DemoApplication.java 运行包 运行命令 mvn package cd target dir java -jar demo-0.0.1-SNAPSHOT.jar 浏览器测试结果 下载包 …

MIT 6.5840-分布式系统学习记录

课程安排 2023 MIT 6.5840 分布式系统 | 环境搭建与 Lab 1 MapReduce - 知乎 (zhihu.com) lab汇总 MIT 6.5840-分布式系统 Lab1

网站巡检:守护网络空间的看门人

在数字时代&#xff0c;互联网如同一座庞大的信息海洋&#xff0c;每天都有数不清的信息在这里生成、流通和消失。正如一所学校需要门卫来保护安全&#xff0c;网络世界同样需要守护者来确保其内容的健康和安全。在这个背景下&#xff0c;爱校对网站巡检服务应运而生&#xff0…

【S5PV210】 | ARM的指令集合

【S5PV210】 | ARM的指令集合 时间&#xff1a;2024年3月17日23:32:06 目录 文章目录 【S5PV210】 | ARM的指令集合目录 ARM指令集具有一系列显著的特点。首先&#xff0c;它属于RISC&#xff08;精简指令集计算机&#xff09;架构&#xff0c;这意味着译码机制相对简单。在AR…

PCL安装(C++)并配置vs

准备工作&#xff1a; 1.PCL下载包(此教程使用PCL1.11.0) 3.visual studio(此教程使用vs2019) PCL下载&#xff1a; 1、找到自己适合的PCL版本,我选择的是PCL1.11.0。 1.1 Github下载&#xff1a;Releases PointCloudLibrary/pcl GitHub 1.2 百度网盘&#xff1a;https://pan…

WPF触发器与模板

触发器 触发器可以理解为&#xff0c;当达到了触发的条件&#xff0c;那么就执行预期内的响应&#xff0c;可以是样式、数据变化、动画等。触发器通过Style.Triggers集合连接到样式中&#xff0c;每个样式都可以有任意多个触发器&#xff0c;并且每个触发器都是System.Windows…

【吊打面试官系列】Redis篇 - 关于Redis持久化

大家好&#xff0c;我是锋哥。今天分享关于Redis持久化的面试题&#xff0c;希望对大家有帮助&#xff1b; Redis 的持久化机制是什么&#xff1f;各自的优缺点&#xff1f; Redis 提供两种持久化机制 RDB 和 AOF 机制: 1、RDB &#xff08;Redis DataBase)持久化方式&#x…

Unity中UGUI中的PSD导入工具的原理和作用

先说一下PSD导入工具的作用&#xff0c;比如在和美术同事合作开发一个背包UI业务系统时&#xff0c;美术做好效果图后&#xff0c;程序在UGUI中制作好界面&#xff0c;美术说这个图差了2像素&#xff0c;那个图位置不对差了1像素&#xff0c;另外一个图大小不对等等一系列零碎的…

【数据库】MySQL数据库基础

文章目录 一、数据库的操作1、显示当前的数据库2、创建数据库 一、数据库的操作 1、显示当前的数据库 SHOW DATABASES;2、创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ...] create_specification:[DEFAULT] CHARA…

关于MySQL数据库的学习3

目录 前言: 1.DQL&#xff08;数据查询语言): 1..1基本查询&#xff1a; 1.2条件查询&#xff1a; 1.3排序查询&#xff1a; 1.3.1使用ORDER BY子句对查询结果进行排序。 1.3.2可以按一个或多个列进行排序&#xff0c;并指定排序方向&#xff08;升序ASC或降序DESC&#…

【数据结构入门】顺序表详解(增删查改)

目录 顺序表的基本概念 动态顺序表的实现 初始化 插入 尾插法 头插法 指定位置之前插入 删除 尾删法 头删法 指定位置删除 查找 销毁 顺序表的基本概念 什么是顺序表&#xff1f; 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般…

R语言:microeco:一个用于微生物群落生态学数据挖掘的R包,第六:trans_nullmodel class

近几十年来&#xff0c;系统发育分析和零模型的整合通过增加系统发育维度&#xff0c;更有力地促进了生态位和中性影响对群落聚集的推断。trans_nullmodel类提供了一个封装&#xff0c;包括系统发育信号、beta平均成对系统发育距离(betaMPD)、beta平均最近分类单元距离(betaMNT…

【赠书第20期】AI绘画与修图实战:Photoshop+Firefly从入门到精通

文章目录 前言 1 入门篇&#xff1a;初识Photoshop与Firefly 2 进阶篇&#xff1a;掌握Photoshop与Firefly的核心技巧 3 实战篇&#xff1a;运用Photoshop与Firefly进行创作 4 精通篇&#xff1a;提升创作水平&#xff0c;拓展应用领域 5 结语 6 推荐图书 7 粉丝福利 前…

idea 的基本配置

一、安装目录介绍 其中&#xff1a;bin 目录下&#xff1a; 二、配置信息目录结构 这是 IDEA 的各种配置的保存目录。这个设置目录有一个特性&#xff0c;就是你删除掉整个目录之后&#xff0c;重新启动 IntelliJ IDEA 会再自动帮你生成一个全新的默认配置&#xff0c;所以很多…

AI预测福彩3D第11弹【2024年3月17日预测--第2套算法重新开始计算第3次测试】

今天继续开始咱们第2套算法的验证&#xff0c;计划每套算法连续测试10期&#xff0c;达到50%的命中率即为较优的模型&#xff0c;可继续使用。老规矩&#xff0c;先上图表&#xff0c;再下结论~ 最终&#xff0c;经过研判分析&#xff0c;2024年3月17日福彩3D的七码预测结果如下…

ggg访问,修改hosts

ggg访问&#xff0c;修改hosts 第二种方式有效

使用递归做三级菜单 Java SpringBoot

使用递归做三级菜单 Java SpringBoot 实体类 Data public class SysMenu implements Serializable {private Long id;private Long parentId;private String name;private Integer type;private String path;private String component;private String perms;private String i…

理财第一课:炒股词典

文章目录 基础代码规则委比委差量比换手率市盈率市净率 散户亏钱的原因庄家分析炒股战法波浪理论其它 钱者&#xff0c;人生之大事&#xff0c;死生存亡之地&#xff0c;不可不察也。耕田之利&#xff0c;十倍&#xff1b;珠玉之赢&#xff0c;百倍&#xff1b;闹革命&#xff…

Flask vs. Django:选择适合你的Web开发框架【第134篇—Flask vs. Django】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Flask vs. Django&#xff1a;选择适合你的Web开发框架 在选择一个适合你项目的Web开发框架…

功能齐全的免费 IDE Visual Studio 2022 社区版

面向学生、开放源代码和单个开发人员的功能齐全的免费 IDE 下载地址 Visual Studio 2022 社区版 - 下载最新的免费版本 Visual Studio 2022 Community Edition – Download Latest Free Version 准备安装 选择需要安装的程序 安装进行中 使用C学习程序设计相关知识并培养编程…