一文详析vue3 Props的用法(父传子)

<ChildComponent title="哈嘿" />

<!-- 根据一个变量的值动态传入 -->
<ChildComponent :title="title" />
 
<!-- 根据一个更复杂表达式的值动态传入 -->
<ChildComponent :title="someCondition ? titleA : titleB" />

<template>
  <ChildComponent v-bind="obj" />
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import { reactive } from 'vue'
let obj = reactive({
  message: 'Hello',
  count: 5
})
</script>

<ChildComponent :message="message" :count="count" />

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

// 字符串数组形式
const props = defineProps(['message', 'count']);
</script>

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

const props = defineProps({
  message: String,
  count: Number,
});
</script>

export default {
  props: ['message'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.message)
  }
}

export default {
  setup(props) {
    // 报错: 类型“LooseRequired<{} & {}>”上不存在属性“message”。
    console.log(props.message)  
  }
}

export default {
  props: {
    message: String,
    count: Number,
  },
  setup() {}
  // 组件的其他选项和逻辑
};

<script setup lang="ts">
import { defineProps } from 'vue';
// 定义一个接口作为自定义类型
interface MyCustomType{
  property1: string;
  property2: number;
}
const props = defineProps({
  name: String,
  age: Number,
  hobbies: Array,
  address: Object,
  customType: MyCustomType, // 自定义类型
  onButtonClick: Function   // 函数类型
});
</script>

- 可以指定 Props 是否为必需，如果为必需，则必须在父组件中传入。

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

const props = defineProps({
  message: {
    type: String,
    required: true
  }
});
</script>

- 可以使用 validator 函数进行自定义验证。

<script setup lang="ts">
import { defineProps } from "vue";

let props = defineProps({
  b: {
    type: Number,
    validator: (value: number) => {
      return value >= 0; // 自定义验证，确保宽度非负
    }
  }
})
console.log(props)
</script>

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

const props = defineProps({
  message: {
    type: String,
    default: 'Hello, Vue 3!',
  },
  count: {
    type: Number,
    default: 0,
  },
});
</script>

<template>
  <div>{{ props.message }}</div>
  <div>{{ props.count }}</div>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue';

// 定义了一个接口 PropsInter  来描述组件的 props 结构
interface PropsInter {
  message: string;
  count: number;
  obj: { a: number; b: number; };
  arr: string[];
}

const props = withDefaults(defineProps<PropsInter>(), {
  message: 'Hello, Vue 3!',
  count: 0,
  obj: () => {
  	return { a: 10, b: 5 }
  },
  arr: () => return [ 'item1', 'item2' ]
});
</script>

defineProps({
  disabled: Boolean
})

<!-- 等同于传入 :disabled="true" -->
<MyComponent disabled />
 
<!-- 等同于传入 :disabled="false" -->
<MyComponent />

const props = defineProps({
  myProp: [Boolean, String],
});

<ChildComponent title="哈嘿" />

<template>
  <div>{{ title }}</div>
</template>
<script setup lang="ts" name="ChildComponent">
import { defineProps } from "vue";
defineProps(['title'])

// console.log(title)  // 报错：找不到名称“title”。
</script>

<template>
  <div>{{ props.title }}</div>
</template>
<script setup lang="ts" name="ChildComponent">
import { defineProps } from "vue";
// 只接收title属性
let props = defineProps(['title'])

console.log(props)

if(props.title) {
  console.log(props.title)
}
</script>

// 定义一个接口，用于限制对象的具体属性
// 接口在 TypeScript 中用于定义一种契约，确保实现该接口的对象都具有相同的结构。
export interface PersonInter {
  id: string;
  name: string;
  age: number;
}

<template>
  <div>
    <ChildComponent :personList="personList" />
  </div>
</template>

<script setup lang="ts" name="Person">
// 在 TypeScript 中，import type 语法用于仅导入类型信息而不导入实际的值或函数。
// 使用 import type 导入的类型信息仅在类型检查时使用，不会在运行时产生任何影响。
import type { PersonInter } from '@/types';

import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
let personList = reactive<PersonInter>({
  id: 'person001',
  name: 'John',
  age: 18
});
</script>

<template>
  <div>{{ person.name }}</div>
</template>
<script setup lang="ts" name="ChildComponent">
import type { PersonInter } from '@/types';
import { defineProps } from "vue";

// 只接收person
let props = defineProps(['person'])
console.log(props)

// 接收person+类型限制
let props = defineProps<{ person: PersonInter }>()

// 接收person+类型限制+限制必要性+默认值
// ?表示不必传，父组件可传可不传，如果父组件不传，则使用默认值
// 指定默认值需要使用withDefaults
withDefaults(defineProps<{ person?: PersonInter }>(), {
  person: () => {
    return { id: 'person000', name: 'Alice', age: 18 }
  }
})

</script>