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.value
    console.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>