如何在 Vue 3 组件道具中使用 type:imported Component？答案

【问题标题】：How to use type: importedCompenent in Vue3 compenent props?如何在 Vue 3 组件道具中使用 type:imported Component？
【发布时间】：2021-12-31 00:57:12
【问题描述】：

假设我有 2 个组件：

待办事项：

export default defineComponent({
  name: 'todoItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    isCompleted: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
});

我想做以下事情待办事项列表：

import TodoItem from './TodoItem.vue';

export default defineComponent({
  name: 'todoList',
  props: {
    todos: {
      type: Array<TodoItem>, // Gives an error
      required: false,
    },
  },
  components: {
    TodoItem,
  },
});

有没有办法可以做到以下几点？我可以通过执行以下操作将其“复制”为打字稿界面：

interface Todo: {name: String, isCompleted: Boolean}

// then do
type: Array as PropType<Todo[]>

但它是重复的代码，每次有变化时我都需要重构它。

有没有更好的办法？

【问题讨论】：

从代码中不清楚todos 到底会做什么。你能举个例子吗？
我认为例如，您可以在文件 src/typings/todo.d.ts 中定义类型（据说它会自动从 src/typings 读取，但我还没有达到我的目的已经试过了。
@EstusFlask todos 将被解构为 todoItems。
我认为您的界面是正确的。这是一个业务逻辑问题，因此您应该有某种业务逻辑数据模型。然后在最后将其转换为 TodoItem 组件。 UI 和业务逻辑是分开的，所以他们不需要在这个级别共享代码。
这个不多解释。 todos 是否包含组件本身？还是引用组件实例？请提供如何使用此道具的示例。不清楚应该如何正确输入。

标签： typescript vue.js vue-component vuejs3

【解决方案1】：

根据您提供的代码，我猜您不需要在 TodoList 组件内使用道具，因为 TodoList 和 TodoItem 是一对父子组件。您可以尝试以下代码在它们之间传递数据：

TodoItem.vue: 无需更改。

TodoList.vue:

<template>
  <TodoItem :name="todos.name" :isCompleted="todos.isCompleted" />
</template>

import { ref } from 'vue
export default defineComponent({
  name: 'todoList',
  components: {
    TodoItem
  },
  setup() {
    const todos = ref({
      name: '',
      isCompleted: false
    })
    return {
      todos
    }
  }
});

或者你可以分别传递name和isCompleted，意思是去掉todos：

TodoList.vue:

<template>
  <TodoItem :name="name" :isCompleted="isCompleted" />
</template>

import { ref } from 'vue
export default defineComponent({
  name: 'todoList',
  components: {
    TodoItem
  },
  setup() {
    const name = ref('')
    const isCompleted = ref(false)
    })
    return {
      name,
      isCompleted
    }
  }
});

以上是单向数据传递（从 TodoList 到 TodoItem）。如果你正在寻求双向数据传递，你可以在 TodoItem.vue 中尝试setup(props, {emit})。

【讨论】：