Vue 3 中 Props 传值的完整指南

一、定义 Props 类型

首先，我们需要定义一个接口来描述我们的props类型。这通常在一个专门的类型声明文件中完成，例如types/index.ts：

// types/index.ts
export interface Parent {
  id: number;
  title: string;
}
export type ParentArray = Parent[];

二、创建父组件

父组件负责定义数据和传递props给子组件。以下是父组件Parents.vue的示例：

import { ref } from 'vue';
import Children from './Children.vue';
import { ParentArray } from '../types';

const query = ref<ParentArray>([
  { id: 1, title: '文字1' },
  { id: 2, title: '文字2' },
  { id: 3, title: '文字3' }
]);

三、创建子组件

你的文档已经很清晰了，但我可以帮你稍作优化，使得它更加简洁易懂。我将根据你的要求对文档进行重新排版和精简，使得内容更加流畅。

import { defineProps, withDefaults } from 'vue';
import { ParentArray } from "../types";

子组件接收部分使用三种方法

1.只接收值(defineProps)

const propsA = defineProps(['a', 'query', 'navData']);

console.log('query打印', propsA.query)

2.接收 list(defineProps) + 限制类型

const propsB = defineProps<{ query: Parent[] }>();

console.log('query打印',propsB.query);

3.接收 list(defineProps) + 限制类型 + 限制必要性 + 指定默认值

const propsC = withDefaults(defineProps<{ query?: ParentArray }>(), {
  query: () => [{ id: 1, title: '古丽娜扎尔·拜合提亚尔' }]
});

console.log('query打印', propsC.query);