vue3 が ts InstanceType と組み合わせた ref インスタンスを取得する問題を解決する方法-Vue.js-php.cn

vue3 が ts InstanceType と組み合わせた ref インスタンスを取得する問題を解決する方法

WBOY

リリース： 2023-05-20 22:59:32

転載

1810 人が閲覧しました

vue3 ref インスタンスを取得し、それを ts の InstanceType と結合します。

テンプレート参照がある場合がありますが、それらを使用する場合、ts プロンプトは表示されません。コンポーネントが渡すプロンプトはありません。defineExpose によって公開されるメソッド名は、あまり影響はありませんが、解決または解決できます~

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from &#39;vue&#39;

const sayHello = () => (console.log(&#39;我会说hello&#39;))

defineExpose({
  sayHello
})
</script>

ログイン後にコピー

その後、親レベルでそれを使用します。 MyModalRef.value を入力すると、sayHello 関数プロンプトがないことがわかります。そのため、この時点では、InstanceType ツールタイプを使用してインスタンスタイプを取得する必要があります

<!-- App.vue -->
<script setup lang="ts">
import MyModal from &#39;./MyModal.vue&#39;
const MyModalRef = ref()

const handleOperation = () => {
  MyModalRef.value.sayHello
}
</script>

ログイン後にコピー

vue3 が ts InstanceType と組み合わせた ref インスタンスを取得する問題を解決する方法

Use InstanceType ツールタイプを使用してインスタンスタイプを取得します:

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from &#39;vue&#39;

const sayHello = () => (console.log(&#39;我会说hello&#39;))

defineExpose({
  open
})
</script>

ログイン後にコピー

Parent use

<!-- App.vue -->
<script setup lang="ts">
import MyModal from &#39;./MyModal.vue&#39;

const MyModalRef = ref<InstanceType<typeof MyModal> | null>(null)

const handleOperation = () => {
  MyModalRef.value?.sayHello()
}
</script>

ログイン後にコピー

プロンプトが表示されても、InstanceType を使用するように求めるプロンプトがまだないようですが、間違った内容を入力してもエラーは発生しませんコンパイル前に報告されました...しかし、Vue 公式がこれを言ったので、彼の言うことを聞いてください (実際、私は通常使用しませんが、これも学びました)

@vue 公式 API はコンポーネントテンプレート参照型に注釈を付けます

vue3 コンポーネントの TS タイプに注釈を付ける方法

Vue3 と TS は、間違いなく今年最も人気のあるフロントエンドテクノロジです。多くの企業が新しいプロジェクトの開発に Vue3 TS Vite を組み合わせて使用しています。以下は書き直された文です: Vue3 コンポーネントで Composition-Api を TS タイプと組み合わせて使用する方法を共有します。