Vue模板引用之ref特殊属性
1. 使用实例
<template><input ref="input" name="我是input的name" /><br /><ul><li v-for="arr in array" :key="arr" id="111" ref="itemRefs">{{arr}}</li></ul>
</template>
<script setup>
import { ref, onMounted, watch, watchEffect, reactive } from "vue";// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
let input = ref(null);
let input1 = ref(null);let array = ref([0, 1, 2, 3]);
//定义一个与li中ref值同名的响应式属性
let itemRefs=ref([])//一定要在组件挂载后才能通过ref访问组件
onMounted(() => {input.value.focus();
});//ref控件为单数时使用
watchEffect(() => {if (input.value) {input.value.focus();//获取控件的属性,比方说name需要用input.valueconsole.log("ref绑定控件的name属性:", input.value.name);} else {// 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）}
});//ref与v-for进行结合获取dom元素为数组
watchEffect(() => {if (itemRefs.value) {//console.log("itemRefs:", itemRefs.value[0]);} else {// 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）}
});
</script><style scoped>
</style>
2. 组件使用ref
父组件
<template><classtest ref="child" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import classtest from './components/classtest.vue'// 声明一个 ref 来存放该元素的引用
// 必须和组件里的 ref 同名
let child = ref(null);//一定要在组件挂载后才能通过ref访问组件
onMounted(() => {console.log('子组件中X的值为:',child.value.x)console.log('子组件中y的值为:',child.value.y)
});
</script><style scoped>
</style>子组件
<template><div>{{x}}</div>
</template><script setup>
import {ref} from 'vue'
name:'classtest'let x=ref(1)let y=ref(2)//应为使用了setup,使得组件默认为私有的
//如想获取组件内容,使用defineExpose 宏显式暴露
defineExpose({x,y
})
</script><style></style>
