Vue2中ref属性的使用方法
一.了解refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。1.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;<template><div><input type="text" ref="inp" id="inp&qu
·
一.了解ref
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
1.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
<template>
<div>
<input type="text" ref="inp" id="inp"/>
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
methods:{
add:function(){
this.$refs.inp.value='22';
console.log(this.$refs.inp);
}
}
}
</script>
从上面的列子可以看出,inp的引用信息为inp ,$refs 是所有注册过的ref的一个集合,
console.log(this.$refs.inp)//<input type="text" id="inp">
console.log(document.getElementById('inp'))//<input type="text" id="inp">
这两种方法获得的都是Dom节点,而$refs相对document.getElementById的方法,会减少获取dom节点的消耗。
2.如果用在子组件上,引用就指向组件实例:
尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如:
<template>
<div>
<input type="text" ref="inp" id="inp"/>
<button @click="add">添加</button>
<child ref="childs"></child>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('child',{
template:"<div>我是一个child组件! </div>"
})
export default {
methods:{
add:function(){
this.$refs.inp.value='22';
console.log(this.$refs.inp);
console.log(this.$refs.childs);
}
}
}
</script>
3.与for连用的时候
当 ref 和 v-for 一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。
<template>
<div>
<input type="text" ref="inp" id="inp"/>
<button @click="add">添加</button>
<child ref="childs"></child>
<ul v-for="item in list">
<li ref="refContent">姓名:{{item.name}},年龄:{{item.age}}</li>
</ul>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('child',{
template:"<div>我是一个child组件! </div>"
})
export default {
data() {
return{
list:[{name:'小高',age:18},{name:'小吴',age:20},{name:'小陈',age:23}]
}
},
mounted() {
console.log(this.$refs.refContent);
},
methods:{
add:function(){
this.$refs.inp.value='22';
console.log(this.$refs.inp);
}
}
}
</script>
更多推荐
已为社区贡献31条内容
所有评论(0)