[TOC] ## 概述 組件引入必須是相對路徑,加上 "./" ## 導入組件 vue3.0 可直接 通過import 導入 ``` import ChildComp from './ChildComp.vue' // 使用 <ChildComp /> ``` ## Props ``` <!-- ChildComp.vue --> <script setup> const props = defineProps({ msg: String }) </script> ``` 調用 ``` <ChildComp :msg="greeting" /> ``` ## 子組件觸發事件給父組件 方式一: ``` <script setup> // 聲明觸發的事件 const emit = defineEmits(['response']) // 帶參數觸發 emit('response', 'hello from child') </script> ``` ``` <ChildComp @response="(msg) => childMsg = msg" /> ``` 方式二: ``` <h2 @click="$emit('world',msg)">gogogo</h2> ``` 父 ``` <MyComponent @world="useWorld" /> ``` ## 子組件使用 v-model 默認 v-model 的 變量為 modelValue,也可更改 [教程](https://cn.vuejs.org/guide/components/events.html#usage-with-v-model) 子 ``` <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) // 可省略 </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> ``` 父 ``` <CustomInput v-model="searchText" /> ``` ## 父組件調用子組件 在子組件中 ``` <script setup> import {ref} from "vue"; function childFn() { console.log('我是子組件'); } const msg = 'Hello World'; const num = ref(0); defineExpose({ // msg, num }); </script> ``` 父組件中 ``` <Index ref="I"></Index> <script setup> import Index from "./index.vue"; const I = ref(null); function test() { console.log(I.value.msg) // Hello World } </script> ``` ## props 檢驗 ``` defineProps({ // 基礎類型檢查 // （給出 `null` 和 `undefined` 值則會跳過任何類型檢查） propA: Number, // 多種可能的類型 propB: [String, Number], // 必傳，且為 String 類型 propC: { type: String, required: true }, // Number 類型的默認值 propD: { type: Number, default: 100 }, // 對象類型的默認值 propE: { type: Object, // 對象或數組的默認值 // 必須從一個工廠函數返回。 // 該函數接收組件所接收到的原始 prop 作為參數。 default(rawProps) { return { message: 'hello' } } }, // 自定義類型校驗函數 propF: { validator(value) { // The value must match one of these strings return ['success', 'warning', 'danger'].includes(value) } }, // 函數類型的默認值 propG: { type: Function, // 不像對象或數組的默認，這不是一個工廠函數。這會是一個用來作為默認值的函數 default() { return 'Default function' } } }) ```