ref与$res的关系

1、如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
2、如果用在子组件上，引用就指向组件实例：

第一、ref标记DOME元素，$refs获取被标记的元素

<template><div id="app"><div ref="mainBox"><h1>在ref中的DOM元素</h1></div></div>
</template><script>
export default {mounted() {console.log(this.$refs.mainBox) //输出：<div><h1>在ref中的DOM元素</h1></div>}
};
</script>

第二、$refs可以获取子组件中的data和方法

子组件
<template><div>{{ title}}</div>
</template><script>
export default {data() {return {title: "hello world"}},methods: {showMsg() {console.log("showMsg方法被调用")}}
}
*********************************
父组件
<template><div id="app"><HelloWorld ref="boxMain"/><button @click="getMain">获取子组件中的值</button></div>
</template><script>
import HelloWorld from "./components/HelloWorld.vue";
export default {components: {HelloWorld},methods: {getMain() {//调用子组件dataconsole.log(this.$refs.boxMain.msg)//调用子组件方法this.$refs.boxMain.showMsg();}}
};
</script>
</script>

ref与$res的关系相关推荐

vue2 中 ref 的使用
ref 是什么 ref 被用来给DOM元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素: 如果用在子组件上,引 ...
Express入门教程
1.1-学习环境 Node.js : 0.10.32 Express : 4.10.2 MongoDB : 2.6.1 Nodemon: 2.0.19 1.2-快速开始安装 Express ex ...
VUEX源码学习笔记（第5~6章共6章）
第五章辅助函数在第一章我们曾经说过: VUEX采用的是典型的IIFE(立即执行函数表达式)模式,当代码被加载(通过<script>或Vue.use())后,VUEX会返回一个对象,这个 ...
软件工程第四周作业 - 四则运算
程序代码:https://git.coding.net/Vector121/f4.git 结对成员:@刘耀泽编写思路: 1. 随机生成四个整数和三个操作符,并在其中随机插入括号,最后将其拼成试题字符 ...
PgSQL · 应用案例 · 惊天性能！单RDS PostgreSQL实例支撑 2000亿
背景 20亿用户,每个用户1000个标签,基于任意标签组合圈选.透视(业务上的需求是一次最多计算100个标签的组合). 相当于要处理2000亿记录. 1.实时求标签组合的记录数.(即满足标签组合的用户 ...
java毕业设计—— 基于java+JSP+SSH的任务调度系统设计与实现（毕业论文+程序源码）——任务调度系统
基于java+JSP+SSH的任务调度系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+JSP+SSH的任务调度系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦. ...
JavaC++题解与拓展——leetcode1823.找出游戏的获胜者【约瑟夫环】
每日一题做题记录,参考官方和三叶的题解目录题目要求思路一:模拟 Java C++ 思路二:递归 Java C++ 思路三:迭代 Java C++ Rust 总结题目要求 [这个问题似乎叫做约瑟 ...
spring配置bean
第一章 spring框架构成第二章 spring容器第三章 spring配置bean 文章目录 spring配置bean 使用xml配置使用构造器创建依赖注入方式 setter方法注入构造方 ...
详解git push后出现src refspec dev does not match any
今天在提交代码时git push 之后出现如下错误 >>> git push origin dev_zgd error: src refspec dev_zgd does not m ...

ref与$res的关系

ref与$res的关系

第一、ref标记DOME元素，$refs获取被标记的元素

第二、$refs可以获取子组件中的data和方法

ref与$res的关系相关推荐

最新文章

热门文章