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); // 0this.$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] 说说你对vue的mixin的理解，有什么应用场景？
[vue] 说说你对vue的mixin的理解,有什么应用场景? mixins 就是混入.一个混入对象可以包含任意组件选项.同一个生命周期,混入对象会比组件的先执行.//暴露两个mixins对象 exp ...
JS每日一题:vue中keepalive怎么理解？
20190212问 vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue ...
React中refs的理解
React中refs的理解 Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素. 描述在典型的React数据流中,props是父组件与子组件交互的唯一方式,要修 ...
[vue][面试]谈一谈对vue组件化的理解？
谈一谈对vue组件化的理解? 思路:组件化定义,优点,使用场景和注意事项等方面展开陈述,同时要强调vue中组件化的一些特点. #####源码分析1:组件定义源码位置:src/core/global- ...
Vue生命周期钩子理解
#Vue生命周期钩子理解 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset= ...
Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
理解vue中$watch使用
侦听组件实例上的响应式 property 或函数计算结果的变化.回调函数得到的参数为新值和旧值. 我们只能将顶层的 data.prop 或 computed property 名作为字符串传递.对于更 ...
浅谈关于quill在vue中的使用
根据公司项目要求使用富文本进行一些列功能实现这里使用quill.js实现插入与替换功能 quill.js官方api文档链接:Quill官方中文文档 · 看云一,通过npm命令安装 npm inst ...

Vue中$refs的理解

Vue中$refs的理解

描述

每日一题

参考

Vue中$refs的理解相关推荐

最新文章

热门文章