Vue3 TS Component/Checkbox

父層

<BasicCheckboxGroup v-model="selected" 
:options="options" />

子層

<template>
​<div v-for="(option, key) in options" :key="key" class="flex">
​<input
​v-model="selected"
​type="checkbox"
​:option="option"
​:value="option.id"
​@checked="$emit('update:modelValue', selected)"
​/>
​<label>{{ option.name }}</label>
​<div>---{{ selected }}---</div>
​</div>
</template>

子層接值

interface Props {
    selected: string[]
} 
const props = withDefaults(defineProps<Props>(), {
    selected: () => [],
}) 

傳值結果 Ｘ
------
const selected = ref<string[]>([])  

傳值結果 Ｏ

props 只能 readonly，不能 mutate，目的只是給 props 預設值沒有衝突，建議不要用來存 props 的變數名稱
不要跟 props 的變數一樣