Skip to content

Commit e35e97c

Browse files
hiro-xrehiro-xre
authored
docs: reorder defineExpose explanation (#3210)
1 parent b68ab1f commit e35e97c

File tree

1 file changed

+107
-107
lines changed

1 file changed

+107
-107
lines changed

‎src/guide/essentials/template-refs.md

+107-107
Original file line numberDiff line numberDiff line change
@@ -113,113 +113,6 @@ See also: [Typing Template Refs](/guide/typescript/composition-api#typing-templa
113113

114114
</div>
115115

116-
## Refs inside `v-for` {#refs-inside-v-for}
117-
118-
> Requires v3.5 or above
119-
120-
<div class="composition-api">
121-
122-
When `ref` is used inside `v-for`, the corresponding ref should contain an Array value, which will be populated with the elements after mount:
123-
124-
```vue
125-
<script setup>
126-
import { ref, useTemplateRef, onMounted } from 'vue'
127-
128-
const list = ref([
129-
/* ... */
130-
])
131-
132-
const itemRefs = useTemplateRef('items')
133-
134-
onMounted(() => console.log(itemRefs.value))
135-
</script>
136-
137-
<template>
138-
<ul>
139-
<li v-for="item in list" ref="items">
140-
{{ item }}
141-
</li>
142-
</ul>
143-
</template>
144-
```
145-
146-
[Try it in the Playground](https://play.vuejs.org/#eNp9UsluwjAQ/ZWRLwQpDepyQoDUIg6t1EWUW91DFAZq6tiWF4oU5d87dtgqVRyyzLw3b+aN3bB7Y4ptQDZkI1dZYTw49MFMuBK10dZDAxZXOQSHC6yNLD3OY6zVsw7K4xJaWFldQ49UelxxVWnlPEhBr3GszT6uc7jJ4fazf4KFx5p0HFH+Kme9CLle4h6bZFkfxhNouAIoJVqfHQSKbSkDFnVpMhEpovC481NNVcr3SaWlZzTovJErCqgydaMIYBRk+tKfFLC9Wmk75iyqg1DJBWfRxT7pONvTAZom2YC23QsMpOg0B0l0NDh2YjnzjpyvxLrYOK1o3ckLZ5WujSBHr8YL2gxnw85lxEop9c9TynkbMD/kqy+svv/Jb9wu5jh7s+jQbpGzI+ZLu0byEuHZ+wvt6Ays9TJIYl8A5+i0DHHGjvYQ1JLGPuOlaR/TpRFqvXCzHR2BO5iKg0Zmm/ic0W2ZXrB+Gve2uEt1dJKs/QXbwePE)
147-
148-
<details>
149-
<summary>Usage before 3.5</summary>
150-
151-
In versions before 3.5 where `useTemplateRef()` was not introduced, we need to declare a ref with a name that matches the template ref attribute's value. The ref should also contain an array value:
152-
153-
```vue
154-
<script setup>
155-
import { ref, onMounted } from 'vue'
156-
157-
const list = ref([
158-
/* ... */
159-
])
160-
161-
const itemRefs = ref([])
162-
163-
onMounted(() => console.log(itemRefs.value))
164-
</script>
165-
166-
<template>
167-
<ul>
168-
<li v-for="item in list" ref="itemRefs">
169-
{{ item }}
170-
</li>
171-
</ul>
172-
</template>
173-
```
174-
175-
</details>
176-
177-
</div>
178-
<div class="options-api">
179-
180-
When `ref` is used inside `v-for`, the resulting ref value will be an array containing the corresponding elements:
181-
182-
```vue
183-
<script>
184-
export default {
185-
data() {
186-
return {
187-
list: [
188-
/* ... */
189-
]
190-
}
191-
},
192-
mounted() {
193-
console.log(this.$refs.items)
194-
}
195-
}
196-
</script>
197-
198-
<template>
199-
<ul>
200-
<li v-for="item in list" ref="items">
201-
{{ item }}
202-
</li>
203-
</ul>
204-
</template>
205-
```
206-
207-
[Try it in the Playground](https://play.vuejs.org/#eNpFjk0KwjAQha/yCC4Uaou6kyp4DuOi2KkGYhKSiQildzdNa4WQmTc/37xeXJwr35HEUdTh7pXjszT0cdYzWuqaqBm9NEDbcLPeTDngiaM3PwVoFfiI667AvsDhNpWHMQzF+L9sNEztH3C3JlhNpbaPNT9VKFeeulAqplfY5D1p0qurxVQSqel0w5QUUEedY8q0wnvbWX+SYgRAmWxIiuSzm4tBinkc6HvkuSE7TIBKq4lZZWhdLZfE8AWp4l3T)
208-
209-
</div>
210-
211-
It should be noted that the ref array does **not** guarantee the same order as the source array.
212-
213-
## Function Refs {#function-refs}
214-
215-
Instead of a string key, the `ref` attribute can also be bound to a function, which will be called on each component update and gives you full flexibility on where to store the element reference. The function receives the element reference as the first argument:
216-
217-
```vue-html
218-
<input :ref="(el) => { /* assign el to a property or ref */ }">
219-
```
220-
221-
Note we are using a dynamic `:ref` binding so we can pass it a function instead of a ref name string. When the element is unmounted, the argument will be `null`. You can, of course, use a method instead of an inline function.
222-
223116
## Ref on Component {#ref-on-component}
224117

225118
> This section assumes knowledge of [Components](/guide/essentials/component-basics). Feel free to skip it and come back later.
@@ -346,3 +239,110 @@ export default {
346239
In the above example, a parent referencing this component via template ref will only be able to access `publicData` and `publicMethod`.
347240

348241
</div>
242+
243+
## Refs inside `v-for` {#refs-inside-v-for}
244+
245+
> Requires v3.5 or above
246+
247+
<div class="composition-api">
248+
249+
When `ref` is used inside `v-for`, the corresponding ref should contain an Array value, which will be populated with the elements after mount:
250+
251+
```vue
252+
<script setup>
253+
import { ref, useTemplateRef, onMounted } from 'vue'
254+
255+
const list = ref([
256+
/* ... */
257+
])
258+
259+
const itemRefs = useTemplateRef('items')
260+
261+
onMounted(() => console.log(itemRefs.value))
262+
</script>
263+
264+
<template>
265+
<ul>
266+
<li v-for="item in list" ref="items">
267+
{{ item }}
268+
</li>
269+
</ul>
270+
</template>
271+
```
272+
273+
[Try it in the Playground](https://play.vuejs.org/#eNp9UsluwjAQ/ZWRLwQpDepyQoDUIg6t1EWUW91DFAZq6tiWF4oU5d87dtgqVRyyzLw3b+aN3bB7Y4ptQDZkI1dZYTw49MFMuBK10dZDAxZXOQSHC6yNLD3OY6zVsw7K4xJaWFldQ49UelxxVWnlPEhBr3GszT6uc7jJ4fazf4KFx5p0HFH+Kme9CLle4h6bZFkfxhNouAIoJVqfHQSKbSkDFnVpMhEpovC481NNVcr3SaWlZzTovJErCqgydaMIYBRk+tKfFLC9Wmk75iyqg1DJBWfRxT7pONvTAZom2YC23QsMpOg0B0l0NDh2YjnzjpyvxLrYOK1o3ckLZ5WujSBHr8YL2gxnw85lxEop9c9TynkbMD/kqy+svv/Jb9wu5jh7s+jQbpGzI+ZLu0byEuHZ+wvt6Ays9TJIYl8A5+i0DHHGjvYQ1JLGPuOlaR/TpRFqvXCzHR2BO5iKg0Zmm/ic0W2ZXrB+Gve2uEt1dJKs/QXbwePE)
274+
275+
<details>
276+
<summary>Usage before 3.5</summary>
277+
278+
In versions before 3.5 where `useTemplateRef()` was not introduced, we need to declare a ref with a name that matches the template ref attribute's value. The ref should also contain an array value:
279+
280+
```vue
281+
<script setup>
282+
import { ref, onMounted } from 'vue'
283+
284+
const list = ref([
285+
/* ... */
286+
])
287+
288+
const itemRefs = ref([])
289+
290+
onMounted(() => console.log(itemRefs.value))
291+
</script>
292+
293+
<template>
294+
<ul>
295+
<li v-for="item in list" ref="itemRefs">
296+
{{ item }}
297+
</li>
298+
</ul>
299+
</template>
300+
```
301+
302+
</details>
303+
304+
</div>
305+
<div class="options-api">
306+
307+
When `ref` is used inside `v-for`, the resulting ref value will be an array containing the corresponding elements:
308+
309+
```vue
310+
<script>
311+
export default {
312+
data() {
313+
return {
314+
list: [
315+
/* ... */
316+
]
317+
}
318+
},
319+
mounted() {
320+
console.log(this.$refs.items)
321+
}
322+
}
323+
</script>
324+
325+
<template>
326+
<ul>
327+
<li v-for="item in list" ref="items">
328+
{{ item }}
329+
</li>
330+
</ul>
331+
</template>
332+
```
333+
334+
[Try it in the Playground](https://play.vuejs.org/#eNpFjk0KwjAQha/yCC4Uaou6kyp4DuOi2KkGYhKSiQildzdNa4WQmTc/37xeXJwr35HEUdTh7pXjszT0cdYzWuqaqBm9NEDbcLPeTDngiaM3PwVoFfiI667AvsDhNpWHMQzF+L9sNEztH3C3JlhNpbaPNT9VKFeeulAqplfY5D1p0qurxVQSqel0w5QUUEedY8q0wnvbWX+SYgRAmWxIiuSzm4tBinkc6HvkuSE7TIBKq4lZZWhdLZfE8AWp4l3T)
335+
336+
</div>
337+
338+
It should be noted that the ref array does **not** guarantee the same order as the source array.
339+
340+
## Function Refs {#function-refs}
341+
342+
Instead of a string key, the `ref` attribute can also be bound to a function, which will be called on each component update and gives you full flexibility on where to store the element reference. The function receives the element reference as the first argument:
343+
344+
```vue-html
345+
<input :ref="(el) => { /* assign el to a property or ref */ }">
346+
```
347+
348+
Note we are using a dynamic `:ref` binding so we can pass it a function instead of a ref name string. When the element is unmounted, the argument will be `null`. You can, of course, use a method instead of an inline function.

0 commit comments

Comments
 (0)