如何在 Vue3 中使用 TypeScript 定義 ref 的類型（在模板上綁定）？

Question

模板：

<tremplate>
  <div ref="element"></div>
</template>

腳本：

export default {
  setup() {
    const element = ref(null);
    return {
      element,
    };
  },
};

這是在 vue3 中定義 ref 的正常方式，但是以 JavaScript 方式。 如果我使用 TypeScript，我將需要為值element定義一個類型，對嗎？

如何確保值element的類型正確？

Answer 1

好吧，這取決於您是否需要輸入它並提供成員信息（公共屬性、方法等）。 如果這樣做，那么是的，您需要為它定義一個類型； 否則，您不必這樣做，並且可以簡單地使用.value訪問未包裝的引用，這將其保留為any類型（我敢打賭您已經弄清楚了這個）。

但是如果你必須這樣做，你需要告訴編譯器它是什么或者它將被分配到什么上。 為此，您需要使用ref的第三個重載（不帶參數）並將泛型類型顯式設置為所需類型——在您的情況下，您需要HTMLDivElement HTMLElement如果您不關心它必須提供的特定成員）。

export default defineComponent({
  setup() {
    const el = ref<HTMLDivElement>();

    onMounted(() => {
      el.value // DIV element
    });

    return {
      el
    }
  }
})

在 JavaScript 中，您沒有類型檢查，因此在ref function 上傳遞null與不傳遞任何內容一樣好（這對於模板引用來說尤其合適）*； 從某種意義上說，它甚至可能會產生誤導，即未包裝的值實際上解析為除null的其他值。

* 使用 Composition API 時，統一了“reactive refs”和“template refs”的概念。 我們在 mounted 鈎子上訪問這種特殊類型的ref的原因是因為 DOM 元素將在初始渲染后分配給它。

參考：

• https://v3.vuejs.org/guide/composition-api-template-refs.html#template-refs

Answer 2

<template> <ChildComponent ref="childRef"> </template> <script lang="ts" setup> import ChildComponent from './ChildComponent.vue' import { ref } from 'vue' const childRef = ref<InstanceType<typeof ChildComponent>>() childRef.value.childMethods() </script>

Answer 3

該行不正確：

    const el = ref<HTMLDivElement>();

el不是 HTMLDivElement。 相反，它是元素的代理。 該代理的$el是實際的 HTMLDivElement。 雖然我不確定我是否做對了。 在一個組件中，我設法按如下方式鍵入它：

import { ComponentPublicInstance, defineComponent, ref } from 'vue';

export default defineComponent({
  // snipped...
  setup() {
    const field = ref<ComponentPublicInstance<HTMLInputElement>>();
    return {
      field,
      fun() { field.value.$el.value = 'some value'; }
    };
  }
  // snipped...
});

Answer 4

Vue 3.2+

<template>
   <input ref="fileInput" style="display: none;" type="file" @change="onFileSelected" />
   <button @click="fileInput?.click()">Pick Files</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fileInput = ref<HTMLDivElement>()

function onFileSelected(event: any) { console.log("Event: " + event) }
</script>

第二個例子

<template>
   <div ref="coolDiv">Some text</div>
   <button @click="changeCoolDiv">Pick Files</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const coolDiv = ref<HTMLDivElement>()

function changeCoolDiv() {
  if(coolDiv) {
    coolDiv.value // Div element
  }
}
</script>

Answer 5

如果使用vue-class-component package（這里是 beta v8 但與@Component相同而不是@Option將在早期版本中工作）：

<template>
  <div ref="element">
    <MyOtherComponent ref="otherComponent" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import MyOtherComponent from '../MyOtherComponent.vue'

@Options({
  components: {
    MyOtherComponent,
  },
})

export default class MyComponent extends Vue {
  $refs!: {
    element: HTMLDivElement,
    otherComponent: InstanceType<typeof MyOtherComponent>,
  }

  mounted() {
    this.$refs.otherComponent.myOtherComponentMethod()
  }
}
</script>

Answer 6

模板：

<tremplate>
  <div ref="element"></div>
</template>

腳本：

export default {
  setup() {
    const elelemt = ref(null);
    return {
      element,
    };
  },
};

這是在 vue3 中定義 ref 的正常方式，但在 JavaScript 方式中。 如果我使用的是 TypeScript，我需要為 value element定義一個類型，對吧？

如何確保值element的類型正確？