<ChildComponent title="哈嘿" />

<!-- 根據(jù)一個變量的值動態(tài)傳入 -->
<ChildComponent :title="title" />
 
<!-- 根據(jù)一個更復雜表達式的值動態(tài)傳入 -->
<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';

// 字符串數(shù)組形式
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 作為第一個參數(shù)
    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   // 函數(shù)類型
});
</script>

- 可以指定 Props 是否為必需，如果為必需，則必須在父組件中傳入。

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

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

- 可以使用 validator 函數(shù)進行自定義驗證。

<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 中用于定義一種契約，確保實現(xiàn)該接口的對象都具有相同的結構。
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 語法用于僅導入類型信息而不導入實際的值或函數(shù)。
// 使用 import type 導入的類型信息僅在類型檢查時使用，不會在運行時產(chǎn)生任何影響。
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>