模版引用（访问DOM元素）
模版引用（访问DOM元素）
需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute：
允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。
访问模版引用
为了通过组合式 API 获得该模板引用，我们需要声明一个同名的 ref：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script setup>
import { ref, onMounted } from 'vue'
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
|
侦听一个模板引用 ref 的变化，确保考虑到其值为 null 的情况：
1
2
3
4
5
6
7
| watchEffect(() => {
if (input.value) {
input.value.focus()
} else {
}
})
|
v-for 中的模板引用
对应的 ref 中包含的值是一个数组，它将在元素被挂载后包含对应整个列表的所有元素：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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>
|
组件上的ref
引用中获得的值是组件实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
})
</script>
<template>
<Child ref="child" />
</template>
|
使用了 <script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：
1
2
3
4
5
6
7
8
9
10
11
12
| <script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
|
