模板引用 ref
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的ref attribute:
<input ref="input" />
ref
是一个特殊的 attribute,和v-for
章节中提到的key
类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后,获得对它的直接引用。ref
引用,如果用在普通的 DOM 元素上,引用指向的就是 DOM 元素。如果用在子组件上,引用指向的就是子组件实例。ref
attribute 很有用处,比如说在组件挂载时编程式地聚焦到一个input
元素上,或在一个元素上初始化一个第三方库。
访问模板 ref
为了通过组合式 API 获得该模板ref
,我们需要声明一个同名的ref
:
<script setup> import {ref , onMounted } from 'vue' // 声明一个 ref 来存放该元素的引用 // 必须和模板 ref 同名 const input =ref (null)onMounted (() => { input.value.focus() }) </script> <template> <input ref="input" /> </template>
如果不使用<script setup>
,需确保从setup()
返回ref
:
<script> export default {setup() { const input =ref (null) // ... return { input } } } </script>
注意,你只可以,在组件挂载后,才能访问ref
。如果你想在模板中的表达式上访问input
,在初次渲染时会是null
。这是因为在初次渲染前这个元素还压根不存在呢!
如果你正试图观察一个模板ref
的变化,确保考虑到ref
的值为null
的情况:
watchEffect (() => { if (input.value) { input.value.focus() } else { // 此时还未挂载,或此元素已经被卸载(例如经过 v-if 控制) } })
<script setup> import {ref,onMounted} from 'vue'; import Demo from './demo.vue'; const refText=ref (null); const refText=ref (null); onMounted(()=>{ // DOM 元素 console.log(refText.value.innerHTML); // Demo 组件 console.log(refDemo.value); }); </script> <template> <pref ="refText">文字文本内容<p> <Demoref ="refText" /> </template>
v-for 中的 ref
当ref
在v-for
中使用时,相应的ref
中包含的值是一个数组,它将在元素被挂载后填充:
<script setup> import { ref, onMounted } from 'vue' const list = ref([ /* ... */ ]) const itemRefs =ref ([])onMounted (() => console.log(itemRefs.value)) </script> <template> <ul> <liv-for ="item in list" ref="itemRefs"> {{ item }} </li> </ul> </template>
应该注意的是,ref
数组不能保证与源数组相同的顺序。
函数型 ref
除了使用字符串值作名字,ref
attribute 还可以绑定为一个函数,会在每次组件更新时都被调用。函数接受该元素引用作为第一个参数:
<input :ref="(el) => { /* assign el to a property or ref */ }">
如果你正在使用一个动态的:ref
绑定,我们也可以传一个函数。当元素卸载时,这个el
参数会是null
。你当然也可以使用一个方法而不是内联函数。
组件上的 ref
ref
也可以被用在一个子组件上。此时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>
如果一个子组件使用的是选项式 API 或没有使用<script setup>
,被引用的组件实例和该子组件的this
完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易,当然也因此,应该只在绝对需要时才使用组件引用。大多数情况下,你应该首先使用标准的props
和emit
接口来实现父子组件交互。
有一个例外的情况,使用了<script setup>
的组件时默认私有的:一个父组件无法访问到一个使用了<script setup>
的子组件中的任何东西,除非子组件在其中通过defineExpose
宏显式暴露:
子组件 <script setup> import { ref } from 'vue' const a = 1 const b = ref(2) defineExpose({ a, b }) </script>
当父组件通过模板ref
获取到了该组件的实例时,得到的实例类型为{a: number, b: number}(ref
都会自动解包,和一般的实例一样)。