親コンポーネント: v-model 双方向バインディングを使用して値を渡す
サブアセンブリ:
1. defineProps で受け取った変数名をmodelValueに固定
(次のコードでは、v-model を介して渡された性別を、固定構文である modelValue に置き換えることと同等です)
// 親コンポーネント
<script setup lang="ts">
import { ref } from 'vue'
const options = [
{ label: 'male', value: 1 },
{ label: 'female', value: 0 }
]
const性別 = ref(1) // デフォルトの性別
</script>
<template>
<CpRadioBtn :options="options" v-model="gender"></CpRadioBtn>
</template>
<style></style>
2. 次を渡します: emit( 'update:modelValue' , value) イベントを親コンポーネントに渡さずに値を直接変更します
('update:modelValue' も固定の書き方で、value は変更したい値で、パラメータを直接渡すことができます)
// 子セット
<script setup lang="ts">
defineProps<{ options: { label: string; 値: 数 }[] モデル値: 数 | 文字列}>()const emit = defineEmits<{ (e: 'update:modelValue', value: number | string): void }>() </script>
<template>
<div class="cp-radio-btn">
<a
class="item"
href="javascript:;"
v-for="item in options"
:key="item.label"
:class="{ active: item.value == modelValue }"
@click="emit('update:modelValue', item.value)"
> { { item.label }}
</a>
<!-- <a class="item" href="javascript:;">女</a> -->
</div>
</template><style lang="scss" scoped>
.cp-radio-btn { 表示: フレックス; フレックスラップ: ラップ; .item { 高さ: 32px; 最小幅: 60px; 行の高さ: 30px; パディング: 0 14px; テキスト整列: 中央; ボーダー: 1px ソリッド var(--cp-bg); 背景色: var(--cp-bg); 右マージン: 10px; ボックスサイズ: ボーダーボックス; 色: var(--cp-text2); margin-bottom: 10px; ボーダー半径: 4px; トランジション: すべて 0.3 秒; &.active { 境界線の色: var(--cp-primary); 背景色: var(--cp-plain); } } }
</style>