前面文章中的代码中的关于父子组件之间的双向数据绑定,在这里说明一下:
<el-radio-group v-model="selectValue">
<el-radio-button v-for="item in selectOptions" :key="item.id" :label="item.label"
</el-radio-group>
自定义组件中selectValue值是计算父组件传值payMethod而来:
const props = defineProps({
payMethod: [String, Number]
});
const emits = defineEmits(['update:payMethod']);
const selectValue = computed({
get: () => { return props.payMethod },
set: newVal => emits('update:payMethod', newVal)
});
这里的update:payMethod表示这个组件可以触发一个事件来更新与 v-model
绑定的值。
所以在父组件中使用:
<PayMethodSelect v-model:payMethod="payMethod" />