1.ref概念
在JavaScript中需要通过document.querySelector(“#demo”)来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs
即可调用,这样可以减少获取dom节点的消耗。ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName
来访问元素或子组件的实例。
2.在元素中使用ref
举例:
<div id="app">
<!-- 在p标签上加上ref特性 并赋予id-->
<p ref="mp">这是p标签</p>
<button type="button" @click="get">获取ref</button>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
new Vue({
el:"#app",
methods:{
get(){
console.log(this.$refs);
console.log(typeof(this.$refs));
}
}
})
</script>
当我们点击button时,我们看到输出的是{mp:p}对象,打开mp对象我们看到其中的内容(下图为内容的一部分)
该对象中有很多属性和属性值,当我们将get修改如下时
get(){
console.log(this.$refs.mp);
}
即在我们的this.$refs
后面加上我们设置的ref值,打印的结果为:
ref用在普通的dom元素上使用,引用指向的是dom元素,通过$refs
可以获取到该dom的属性集合,作用与js的选择器类似。
可以看到,在 元素标签上使用 ref,通过 this.$refs.ref
获取到这个引用的时候,获取到的是一个 DOM 元素,如果是在一个组件上使用 ref,通过 this.$refs.ref
获取到的是一个组件的引用。
3.在组件中使用ref
举例:
<div id="app">
<son ref="eg"></son>
<button @click="change">父组件中的btn</button>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var son = Vue.extend({
template:`
<div style="width:100px;height:100px;background-color:red;"></div>
`,
})
new Vue({
el:"#app",
components:{
"son":son,
},
methods:{
change(){
console.log(this.$refs);
console.log(this.$refs.eg);
}
}
})
</script>
ref着重于引用,主要用于调用子组件中的属性和方法,不能传递数据,如果强行传递,会报错。而且ref用在dom元素上的时候,可以使用到选着器的作用。