标签：div fun 文章 vue item charset name func tick
ref 有三种用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>ref</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <li v-for="item in list" ref="refContent"> {{item}}</li> </ul> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", data: { list: [‘马芸‘, ‘麻花藤‘, ‘王剑琳‘, ‘李佳成‘], }, created: function() { this.$nextTick(() => { console.log(this); // #app vue实例 console.log(this.$refs.refContent); // <p>标签dom元素 ref在外面的元素上</p>} ) }) }, }); </script>
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
在学习 jq 时，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>ref</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app" v-on:click="consoleRef"> <p ref="outsideDomRef">ref在外面的元素上</p> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", methods: { //用来获取具有ref属性的节点对象 consoleRef: function() { console.log(this); // #app vue实例 console.log(this.$refs.outsideDomRef); // <p>标签dom元素 ref在外面的元素上</p> } }, }); </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>ref</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"></component-father> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var refoutsidecomponentTem = { template: "<div class=‘childComp‘><p>ref在外面的组件上</p></div>" }; var app = new Vue({ el: "#app", components: { "component-father": refoutsidecomponentTem }, methods: { consoleRef: function() { console.log(this); // #app vue实例 console.log(this.$refs.outsideComponentRef); // div.childComp vue实例，组件实例 } } }); </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>ref</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <component-father></component-father> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var refinsidedomTem = { template: "<div class=‘childComp‘ v-on:click=‘consoleRef‘>" + "<p ref=‘insideDomRef‘>ref在组件里面的元素上，我是子组件</p>" + "</div>", methods: { consoleRef: function() { console.log(this); // div.childComp vue实例 console.log(this.$refs.insideDomRef); // <p>ref在组件里面的元素上，我是子组件</p> } } }; var app = new Vue({ el: "#app", components: { "component-father": refinsidedomTem } }); </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>ref</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ref-inside-dom></ref-inside-dom> </div> </body> </html> <script type="text/javascript" charset="utf-8"> Vue.component("ref-inside-dom", { template: "<div class=‘insideFather‘> " + "<input type=‘text‘ ref=‘insideDomRefAll‘ v-on:input=‘showinsideDomRef‘>" + "<p>ref在里面的元素上--全局注册 </p> " + "</div>", methods: { showinsideDomRef: function() { console.log(this); //这里的this其实还是div.insideFather console.log(this.$refs.insideDomRefAll); // <input type="text"> } } }); var app = new Vue({ el: "#app", }); </script>
参考文章：https://www.cnblogs.com/goloving/p/9404099.html
标签：div fun 文章 vue item charset name func tick
原文地址：https://www.cnblogs.com/antao/p/12986557.html
