Template Refs

2023-02-25 02:41| 来源: 网络整理| 查看: 265

Template Refs #

While Vue's declarative rendering model abstracts away most of the direct DOM operations for you, there may still be cases where we need direct access to the underlying DOM elements. To achieve this, we can use the special ref attribute:

template

ref is a special attribute, similar to the key attribute discussed in the v-for chapter. It allows us to obtain a direct reference to a specific DOM element or child component instance after it's mounted. This may be useful when you want to, for example, programmatically focus an input on component mount, or initialize a 3rd party library on an element.

Accessing the Refs #

To obtain the reference with Composition API, we need to declare a ref with the same name:

vue import { ref, onMounted } from 'vue' // declare a ref to hold the element reference // the name must match template ref value const input = ref(null) onMounted(() => { input.value.focus() })

If not using , make sure to also return the ref from setup():

jsexport default { setup() { const input = ref(null) // ... return { input } } }

The resulting ref is exposed on this.$refs:

vue export default { mounted() { this.$refs.input.focus() } }

Note that you can only access the ref after the component is mounted. If you try to access $refs.inputinput in a template expression, it will be null on the first render. This is because the element doesn't exist until after the first render!

If you are trying to watch the changes of a template ref, make sure to account for the case where the ref has null value:

jswatchEffect(() => { if (input.value) { input.value.focus() } else { // not mounted yet, or the element was unmounted (e.g. by v-if) } })

See also: Typing Template Refs

Refs inside v-for #

Requires v3.2.25 or above

When ref is used inside v-for, the corresponding ref should contain an Array value, which will be populated with the elements after mount:

vue import { ref, onMounted } from 'vue' const list = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() => console.log(itemRefs.value)) {{ item }}

Try it in the Playground

When ref is used inside v-for, the resulting ref value will be an array containing the corresponding elements:

vue export default { data() { return { list: [ /* ... */ ] } }, mounted() { console.log(this.$refs.items) } } {{ item }}

Try it in the Playground

It should be noted that the ref array does not guarantee the same order as the source array.

Function Refs #

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:

template

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.

Ref on Component #

This section assumes knowledge of Components. Feel free to skip it and come back later.

ref can also be used on a child component. In this case the reference will be that of a component instance:

vue import { ref, onMounted } from 'vue' import Child from './Child.vue' const child = ref(null) onMounted(() => { // child.value will hold an instance of }) vue import Child from './Child.vue' export default { components: { Child }, mounted() { // this.$refs.child will hold an instance of } }

If the child component is using Options API or not using , theThe referenced instance will be identical to the child component's this, which means the parent component will have full access to every property and method of the child component. This makes it easy to create tightly coupled implementation details between the parent and the child, so component refs should be only used when absolutely needed - in most cases, you should try to implement parent / child interactions using the standard props and emit interfaces first.

An exception here is that components using are private by default: a parent component referencing a child component using won't be able to access anything unless the child component chooses to expose a public interface using the defineExpose macro:

vue import { ref } from 'vue' const a = 1 const b = ref(2) // Compiler macros, such as defineExpose, don't need to be imported defineExpose({ a, b })

When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape { a: number, b: number } (refs are automatically unwrapped just like on normal instances).

See also: Typing Component Template Refs

The expose option can be used to limit the access to a child instance:

jsexport default { expose: ['publicData', 'publicMethod'], data() { return { publicData: 'foo', privateData: 'bar' } }, methods: { publicMethod() { /* ... */ }, privateMethod() { /* ... */ } } }

In the above example, a parent referencing this component via template ref will only be able to access publicData and publicMethod.

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章