Vue与ref属性与refs

谁借莪１个温暖的怀抱￠ 2024-04-19 09:06 97阅读 0赞

## ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 ##

# 注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册 #

![这里写图片描述][SouthEast]

## 实例： ##

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

这里为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来引用DOM元素了

第二部分

# [vue中的 ref 和 $refs][vue_ ref _ _refs] #

![format_png][]

![format_png 1][]

![format_png 2][]

如图，`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节点的消耗。

![format_png 3][]

![format_png 4][]

![format_png 5][]

![format_png 6][]

ref和v-for在一起的情况

![format_png 7][]

li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”，

此时的$refs

![format_png 8][]

![format_png 9][]

第三部分：

一、ref使用在外面的组件上

HTML 部分

1.  `<div id="ref-outside-component" v-on:click="consoleRef">`
2.  `<component-father ref="outsideComponentRef">`
3.  `</component-father>`
4.  `<p>ref在外面的组件上</p>`
5.  `</div>`
6.

js部分

1.  `var refoutsidecomponentTem={`
2.  `template:"<div class='childComp'><h5>我是子组件</h5></div>"`
3.  `};`
4.  `var refoutsidecomponent=new Vue({`
5.  `el:"#ref-outside-component",`
6.  `components:{`
7.  `"component-father":refoutsidecomponentTem`
8.  `},`
9.  `methods:{`
10. `consoleRef:function () {`
11. `console.log(this); // #ref-outside-component vue实例`
12. `console.log(this.$refs.outsideComponentRef); // div.childComp vue实例`
13. `}`
14. `}`
15. `});`
16.

二、ref使用在外面的元素上

HTML部分

1.  ``
2.  `<div id="ref-outside-dom" v-on:click="consoleRef" >`
3.  `<component-father>`
4.  `</component-father>`
5.  `<p ref="outsideDomRef">ref在外面的元素上</p>`
6.  `</div>`

JS部分

1.  `var refoutsidedomTem={`
2.  `template:"<div class='childComp'><h5>我是子组件</h5></div>"`
3.  `};`
4.  `var refoutsidedom=new Vue({`
5.  `el:"#ref-outside-dom",`
6.  `components:{`
7.  `"component-father":refoutsidedomTem`
8.  `},`
9.  `methods:{`
10. `consoleRef:function () {`
11. `console.log(this); // #ref-outside-dom vue实例`
12. `console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p>`
13. `}`
14. `}`
15. `});`
16.

三、ref使用在里面的元素上---局部注册组件

HTML部分

1.  ``
2.  `<div id="ref-inside-dom">`
3.  `<component-father>`
4.  `</component-father>`
5.  `<p>ref在里面的元素上</p>`
6.  `</div>`

JS部分

1.  `var refinsidedomTem={`
2.  `template:"<div class='childComp' v-on:click='consoleRef'>" +`
3.  `"<h5 ref='insideDomRef'>我是子组件</h5>" +`
4.  `"</div>",`
5.  `methods:{`
6.  `consoleRef:function () {`
7.  `console.log(this); // div.childComp vue实例`
8.  `console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>`
9.  `}`
10. `}`
11. `};`
12. `var refinsidedom=new Vue({`
13. `el:"#ref-inside-dom",`
14. `components:{`
15. `"component-father":refinsidedomTem`
16. `}`
17. `});`
18.

四、ref使用在里面的元素上---全局注册组件

HTML部分

1.  ``
2.  `<div id="ref-inside-dom-all">`
3.  `<ref-inside-dom-quanjv></ref-inside-dom-quanjv>`
4.  `</div>`

JS部分

1.  `Vue.component("ref-inside-dom-quanjv",{`
2.  `template:"<div class='insideFather'> " +`
3.  `"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +`
4.  `" <p>ref在里面的元素上--全局注册 </p> " +`
5.  `"</div>",`
6.  `methods:{`
7.  `showinsideDomRef:function () {`
8.  `console.log(this); //这里的this其实还是div.insideFather`
9.  `console.log(this.$refs.insideDomRefAll); // <input type="text">`
10. `}`
11. `}`
12. `});`
13.  
14. `var refinsidedomall=new Vue({`
15. `el:"#ref-inside-dom-all"`
16. `});`

[SouthEast]: https://img-blog.csdn.net/20170606160526651?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbjM2MXp5Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20170606160557129?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbjM2MXp5Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20170606160613871?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbjM2MXp5Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[vue_ ref _ _refs]: http://www.cnblogs.com/xumqfaith/p/7743387.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE0NTgxMzcyNi0xODk4MTAzMTA0LnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE0NTg1MDQxNC0xNzQzMjkxMTI5LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1MDEzNzY4MC0yMTE0MzAxOTI4LnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1MDkwMTQ3Ni02MjQ4MjMxNi5wbmc?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1MTkxOTYwMS0zMTcyOTA2NzMucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1MjE1NTQ0NS04NDU4MDk1MTYucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1MjEzMDgzNi0xMjA1Nzc1NTc0LnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1MzgyNjI0Mi0xMDg1MjYwMjE0LnBuZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1NDAyMzUwOC00Nzk5MDg5OS5wbmc?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTA4OTAyOC8yMDE3MTAvMTA4OTAyOC0yMDE3MTAyNzE1NDEwNTM1MS01ODA5MTkxMi5wbmc?x-oss-process=image/format,png