模板引用 ref

<script setup> 

import { ref, onMounted } from 'vue' 

// 声明一个 ref 来存放该元素的引用 

// 必须和模板里的 ref 同名 

const input = ref(null) 

onMounted(() => { input.value.focus() }) 

</script> 


<template> 

<input ref="input" /> 

</template>

只有在组件挂载之后才能访问模板引用。若想在模板中的表达式上访问input，在初次渲染时会是null（初次渲染前这个元素还不存在），可用watchEffect进行侦听

如果一个子组件使用选项式API或者没有使用<script setup>,被引用的组件实例和该子组件的this完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的props和emit接口来实现父子组件交互。

有一个例外情况，使用了<script setup>的组件默认私有的，一个父组件无法访问到一个使用了<script setup>的子组件中的任何东西，除非子组件通过defineExpose宏显示暴露。

v-for中的模板引用

<script setup> 

import { ref, onMounted } from 'vue' 

const list = ref([ /* ... */ ])

 const itemRefs = ref([]) 

onMounted(() => console.log(itemRefs.value)) 

</script> 

<template> 

  <ul> 

    <li v-for="item in list" class="testClass" ref="itemRefs"> {{ item }} </li> 

  </ul>

</template>

此时的结构大致如下,包含的值是一个数组，但是 ref 数组并不保证与源数组相同的顺序,故此时不好准确的获取想要引用的某一ref

函数模板引用，给每一ref给其独特的命名

除了使用字符串值作为名字，ref attribute还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数。

<script setup>

import { ref, onMounted } from 'vue'

const list = ref([ /* ... */ ])

const tabRefs = ref([])

const setRef = (el, id) => {

  if (el) tabRefs.value['itemRef' + id] = el

}

onMounted(() => console.log('tabRefs', tabRefs.value))

</script>

<template>

  <ul>

    <li v-for="item in list" class="testClass" :ref="(el) => setRef(el, item.id)"> {{ item }} </li>

  </ul>

</template>

此时的结构为

此时可以准确的引用某一ref

tabRefs.value['itemRef0]