ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例
注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/07079bb70092256d21d015c3bba467f9.png)
实例:
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/dbc535b4d1594a855e8d85daa1b10264.png)
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/b395f91401f03f3565603afef36511fd.png)
这里为了在create的时候引用DOM元素,先在DOM中使用ref标签进行了注册,然后便可以通过’this.$refs’再跟注册时的名称来引用DOM元素了
第二部分
![](https://i-blog.csdnimg.cn/blog_migrate/7ec840321e1a0f51c47b56b750d848f2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9f57f2ed71f8b576f9d10106f932c321.png)
![](https://i-blog.csdnimg.cn/blog_migrate/51c277e04dd24fad92b1b2042943f75f.png)
如图,ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
在上面的例子中,input的引用信息为input1 ,$refs 是所有注册过的ref的一个集合,
console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">
这两种方法获得的都是Dom节点,而$refs相对document.getElementById的方法,会减少获取dom节点的消耗。
![](https://i-blog.csdnimg.cn/blog_migrate/fe3fb9b6eaaffa02245d3d8bd40482e9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a464f20d3a37264bb2185ab8da8b17be.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fce2a0e1da7c3b3187a224d3422a436b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1e2758ae1f4f5359f1adc0b011339145.png)
ref和v-for在一起的情况
![](https://i-blog.csdnimg.cn/blog_migrate/bea2eb1051cddfccf42e72e0ee19a4fd.png)
li里的ref的无法读取item里面的值,即item.name或被直接读取为字符串“item.name”,
此时的$refs
![](https://i-blog.csdnimg.cn/blog_migrate/d39249925e418a3099b18901cd472f08.png)
![](https://i-blog.csdnimg.cn/blog_migrate/55a39c88113e73c2afced5819f6b8b4d.png)
第三部分:
一、ref使用在外面的组件上
HTML 部分
-
<div id="ref-outside-component" v-on:click="consoleRef">
-
<component-father ref="outsideComponentRef">
-
-
-
-
js部分
-
var refoutsidecomponentTem={
-
template:"<div class='childComp'><h5>我是子组件</h5></div>"
-
-
var refoutsidecomponent=new Vue({
-
el:"#ref-outside-component",
-
-
"component-father":refoutsidecomponentTem
-
-
-
-
-
console.log(this.$refs.outsideComponentRef);
-
-
-
-
二、ref使用在外面的元素上
HTML部分
-
-
<div id="ref-outside-dom" v-on:click="consoleRef" >
-
-
-
<p ref="outsideDomRef">ref在外面的元素上
</p>
-
JS部分
-
-
template:"<div class='childComp'><h5>我是子组件</h5></div>"
-
-
var refoutsidedom=new Vue({
-
-
-
"component-father":refoutsidedomTem
-
-
-
-
-
console.log(this.$refs.outsideDomRef);
-
-
-
-
三、ref使用在里面的元素上---局部注册组件
HTML部分
-
-
<div id="ref-inside-dom">
-
-
-
-
JS部分
-
-
template:"<div class='childComp' v-on:click='consoleRef'>" +
-
"<h5 ref='insideDomRef'>我是子组件</h5>" +
-
-
-
-
-
console.log(this.$refs.insideDomRef);
-
-
-
-
var refinsidedom=new Vue({
-
-
-
"component-father":refinsidedomTem
-
-
-
四、ref使用在里面的元素上---全局注册组件
HTML部分
-
-
<div id="ref-inside-dom-all">
-
<ref-inside-dom-quanjv>
</ref-inside-dom-quanjv>
-
JS部分
-
Vue.component("ref-inside-dom-quanjv",{
-
template:"<div class='insideFather'> " +
-
"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
-
" <p>ref在里面的元素上--全局注册 </p> " +
-
-
-
showinsideDomRef:function () {
-
-
console.log(this.$refs.insideDomRefAll);
-
-
-
-
-
var refinsidedomall=new Vue({
-
-