Vue中$refs的理解
Vue中$refs的理解
$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。
描述
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例，另外当v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div ref="node">Node</div>
<layout-div ref="layout"></layout-div>
<div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
Vue.component("layout-div", {
data: function(){
return {
count: 0
}
},
template: `<div>
<div>{{count}}</div>
</div>`
})
var vm = new Vue({
el: '#app',
mounted: function(){
console.log(this.$refs.node); // <div>Node</div> // DOM元素
console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例
console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组
}
})
</script>
</html>
因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: function(){
return {
msg: 0
}
},
template: `<div>
<div ref="node">{{msg}}</div>
<button @click="updateMsg">button</button>
</div>`,
beforeMount: function(){
console.log(this.$refs.node); // undefined
},
mounted: function(){
console.log(this.$refs.node); // <div>0</div>
},
methods: {
updateMsg: function(){
this.msg = 1;
console.log(this.$refs.node.innerHTML); // 0
this.$nextTick(() => {
console.log(this.$refs.node.innerHTML); // 1
})
}
}
})
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://cn.vuejs.org/v2/api/#ref
https://zhuanlan.zhihu.com/p/50638655
https://juejin.im/post/5da58c54e51d4524e207fb92
Vue中$refs的理解的更多相关文章
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- vue中$refs的使用
vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red
- vue & button & refs & click & bug
vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...
- vue中keepalive怎么理解？---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- vue渐进式开发的理解和指令
1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...
- Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...
- 理解MVVM在react、vue中的使用
理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view) :是应用程序中数据显示的部分. ...
- 函数防抖节流的理解及在Vue中的应用
防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...
- 对vue中nextTick()的理解及使用场景说明
异步更新队列: 首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的. 即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新 ...
随机推荐
- 搭建 github 报错 Permission denied (publickey)
将 key 加入 github 出现如下问题 这是本地仓 user.name user.email 与 github 注册信息不一致造成 将本地仓 user 信息与 github 修改一致,出现如下问 ...
- IDEA:端口号被占用解决办法
idea遇到这样的问题:如下图 解决办法 步骤1:通过端口号找到pid打开dos命令行,输入netstat -ano | find "9009"得到下列内容,看到最后一行就是pid ...
- 【java】设置 tomcat 账号密码
<role rolename="manager-gui"/> <user username="tomcat" password="t ...
- web-云部署上线
- PG数据库的离线rpm包下载
PG数据库的离线rpm包下载 背景 周末时间研究数据库的版本. 发现PostgreSQL数据库的版本号已经变成了一年一个大版本. 兼容起来其实成本很高. 想着能够在能够上网的机器上面弄好多套数据库. ...
- [转帖]JMeter压测Redis
https://www.cnblogs.com/yjlch1016/p/14052402.html 一.Redis Data Set插件: https://jmeter-plugins.org/wik ...
- [转帖]centos7 firewall-cmd主机之间端口转发
目录 1. firewalld 1.1 firewalld守护进程 1.2 控制端口/服务 1.3 伪装IP 1.4 端口转发 2. 案例 2.1 配置ServerA 2.2 安装nginx测试 (可 ...
- 【转帖】Lua，LuaJIT，Luarocks的安装与配置-史上最详细【Linux】
目录 一,lunux下lua安装 二,安装luarocks---lua包管理工具 三,LuaJIT的安装 既然各位都点开看了,那么Lua语言不用我介绍了吧,LuaJIT是lua的一个Just-In-T ...
- [转帖]apt update和apt upgrade命令 - 有什么区别？
在之前的文章中,我们查看了APT 命令以及您可以使用包管理器来管理包的各种方法.这是一个总体概述,但在本指南中,我们暂停并重点关注 2 个命令用法.这些是apt update和apt upgrade命 ...
- [转帖]springboot指定端口的三种方式
https://blog.51cto.com/feirenraoyuan/5504099 第一配置文件中添加server.port=9090 第二在命令行中指定启动端口,比如传入参数 java -ja ...