ref
是什么
ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。
如何使用
- ref 加在普通的元素上 ,使用this.$refs.name 获取注册的元素
<div id="app7">
<input type="text"ref="myInput"/ >
<button @click="showRef">show</button>
</div>
var fatComp=new Vue({
el:"#fatComp",
data:{
},
methods:{
showRef:function(){
console.log(this.$refs.myInput)
console.log(this.$refs);
}
}
})
输出的结果是:
<input data-v-0fe792bb="" type="text">
{TEXT: input}
- ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。
<div id="app7">
<childComp ref=inputText></childComp>
<button @click="add">show</button>
</div>
Vue.component('childComp',{
template:"<div>我是一个组件</div>"
})
var fatComp=new Vue({
el:"#fatComp",
data:{
},
methods:{
add:function(){
console.log(this.$refs.inputText);
console.log(this.$refs);
}
}
})
var aaa=fatComp.$refs.inputText;
- ref和v-for在一起的情况
<template>
<div class="hello">
<div v-for="item in 5" :key="item">
<span :ref="'item'+item">{{item}}</span>
</div>
<button @click="showRef">show</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
},
mounted() {
console.log("11111111111==============");
this.$nextTick(() => {
console.log(this.$refs.item1[0]);
//<span data-v-469af010="">1</span>
console.log(this.$refs.item1);
// [span];
console.log(this.$refs);
//item1: [span]
// item2: [span]
// item3: [span]
// item4: [span]
// item5: [span]
});
},
methods: {
show() {
console.log(this.a);
},
showRef() {
console.log(this.$refs.item1);
console.log(this.$refs);
}
}
};
</script>
<style scoped>
</style>