fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.6 KiB
1.6 KiB
category
| category |
|---|
| Component |
::: info This function will be removed in future version.
Vue 3.5 introduced the useTemplateRef API which can effectively replace the functionality of templateRef, therefore we recommend using the native approach.
:::
templateRef
Shorthand for binding ref to template element.
Usage
<script lang="ts">
import { templateRef } from '@vueuse/core';
export default {
setup() {
const target = templateRef('target');
// no need to return the `target`, it will bind to the ref magically
},
};
</script>
<template>
<div ref="target" />
</template>
With JSX/TSX
import { templateRef } from '@vueuse/core';
export default {
setup() {
const target = templateRef<HTMLElement | null>('target', null);
// use string ref
return () => <div ref="target"></div>;
},
};
<script setup>
There is no need for this when using with <script setup> since all the variables will be exposed to the template. It will be exactly the same as ref.
<script setup lang="ts">
import { ref } from 'vue';
const target = ref<HTMLElement | null>(null);
</script>
<template>
<div ref="target" />
</template>
Type Declarations
/**
* @deprecated Use Vue's built-in `useTemplateRef` instead.
*
* Shorthand for binding ref to template element.
*
* @see https://vueuse.org/templateRef
* @param key
* @param initialValue
*
* @__NO_SIDE_EFFECTS__
*/
export declare function templateRef<
T extends HTMLElement | SVGElement | Component | null,
Keys extends string = string,
>(key: Keys, initialValue?: T | null): Readonly<Ref<T>>;