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

Posted 2023-02-23

【中文标题】如何在 Vue 3 组件道具中使用 type:imported Component？

【英文标题】：How to use type: importedCompenent in Vue3 compenent props?

【发布时间】：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 是否包含组件本身？还是引用组件实例？请提供如何使用此道具的示例。不清楚应该如何正确输入。

【参考方案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)。