vue3 模板引用

基础

<input ref="myInput" />

<script setup>
    import { ref, onMounted } from 'vue';

    const myInput = ref(null); // 必须和模版中的 ref 同名
    
    onMounted(() => {
        myInput.value.focus(); // 自动聚焦
    });
</script>

只能在组件挂载后访问模板引用，因为初次渲染时模板引用为 null

比如：

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // 此时还未挂载，或此元素已卸载（例如 v-if=false）
  }
})

列表引用

<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" ref="itemRefs">{{ item }}</li>
    </ul>
</template>

函数模板引用

每次组件更新时会调用 handleRef：

<input :ref="handleRef(el)" />

<script setup>
const handleRef = (el) => {
    /*  将 el 赋给 ref 变量 */
};
</script>

组件上的 ref

引用获得的值是组件实例：

<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';

const child = ref(null);
onMounted(() => {
    // child.value 是 <Child/> 组件实例
});
</script>

<template>
    <Child ref="child" />
</template>

父组件对子组件访问权

1. 选项式 API 或 不使用 <script setup>

父组件对子组件的所有属性和方法有完全的访问权（大多情况下应使用 props 和 emit）。

2. 使用 <script setup>

子组件默认私有，除非子组件在其中通过 defineExpose 宏显示暴露。

<script setup>
import { ref } from 'vue';

const a = 1, b = ref(2);

// 编译器宏无需导入
defineExpose({
    a,
    b
});
</script>