Vue3 父组件如何向子组件传递泛型？

前端

2023-09-28 20:37:36

泛型的作用

泛型是一种类型参数，它允许您在函数或组件中使用不同类型的数据。这样，您就可以复用代码，而无需为每种数据类型编写单独的函数或组件。例如，您可以编写一个通用的函数来对数组中的元素进行排序，无论数组中的元素是什么类型。

在 Vue3 中使用泛型

在 Vue3 中，您可以使用setup script来在父组件中定义泛型类型。setup script是一个特殊的函数，它在组件创建之前被调用，并且可以返回一个对象。这个对象可以包含组件的属性、方法和生命周期钩子。

向子组件传递泛型

为了向子组件传递泛型，您可以在setup script中定义一个泛型类型，并在子组件的props属性中使用该类型。子组件就可以在模板中使用该类型作为其属性或方法的参数。

示例

以下是一个示例，演示如何在 Vue3 中使用setup script向子组件传递泛型：

// 父组件
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ParentComponent',
  setup() {
    // 定义一个泛型类型
    type MyType = {
      name: string
      age: number
    }

    // 返回一个对象，其中包含一个泛型属性
    return {
      // 这将把 MyType 作为 props 属性传递给子组件
      myData: <MyType>{
        name: 'John Doe',
        age: 30
      }
    }
  }
})

<!-- 子组件 -->
<template>
  <div>
    <p>{{ myData.name }}</p>
    <p>{{ myData.age }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ChildComponent',
  props: {
    // 这将把 MyType 作为 props 属性接收
    myData: {
      type: Object,
      required: true
    }
  }
})
</script>