组件通过v-model:XXXX实现数据双向绑定 ★ ★ ★ ★ ★
组件通过v-model:XXXX实现数据双向绑定,更新的时候通过emit("update:XXXX")向外抛出数据,即可被v-model绑定。
父组件:
<emergencyLevelSelector v-model:emergency-level="taskData.emergencyLevel" />
子组件:
const props = defineProps({ emergencyLevel: { type: String, }, }) const emit = defineEmits(["update:emergencyLevel"]); //向外部抛出数据 emit("update:XXXXX", emergencyLevelItem.value) const emergencyLevelChange = () => { emit("update:emergencyLevel", emergencyLevelItem.value) }
=================================================================
案例:项目:gench.projectmanage.pc
E:\shimily\project\gench.projectmanage\gench.projectmanage.pc\src\views\components\emergencyLevelSelector.vue
父组件:moduleTask.vue
<a-form-item label="" name="emergencyLevel" :rules="[{ required: true, message: '请选择紧急程度', trigger: ['blur'] }]"> <emergencyLevelSelector v-model:emergency-level="taskData.emergencyLevel" /> </a-form-item>
emergencyLevelSelector.vue
<template> <a-dropdown :trigger="['click']"> <div class="emergency-selector"> <HourglassOutlined class="emergency-icon-default" :style="{ color: getEmergencyLevelColorByKey(), borderColor: getEmergencyLevelColorByKey() }" /> <div class="emergency-icon-content"> <div class="emergency-status-value">{{ getEmergencyLevelLabelByKey() }}</div> <div class="emergency-status-label">紧急程度</div> </div> </div> <template #overlay> <a-menu @click="handleEmergencyLevel"> <a-menu-item v-for="item in options" :key="item.value"> {{ item.label }} </a-menu-item> </a-menu> </template> </a-dropdown> </template> <script setup lang="ts"> import { onMounted, ref, watch } from 'vue' import { useDict } from '../../pinia'; const dict: any = useDict(); const props = defineProps({ emergencyLevel: { type: String, }, }) const emergencyLevelItem: any = ref(props.emergencyLevel) const emit = defineEmits(["update:emergencyLevel"]); watch(() => props.emergencyLevel, (newVal, oldVal) => { emergencyLevelItem.value = newVal; }, { deep: true, }) const handleEmergencyLevel = ({ key }) => { emergencyLevelItem.value = key; emergencyLevelChange(); } const getEmergencyLevelLabelByKey = () => { let findObj = options.value.find(obj => obj.value == emergencyLevelItem.value) return findObj ? findObj.label : "未选择" } const colorList = ["#1677ff", "#52c41a", "#fadb14", "#fa8c16", "#f5222d"] const getEmergencyLevelColorByKey = () => { let findObj = options.value.find(obj => obj.value == emergencyLevelItem.value) return findObj ? colorList[emergencyLevelItem.value] : "#dadada" } const emergencyLevelChange = () => { emit("update:emergencyLevel", emergencyLevelItem.value) } const options: any = ref(dict.emergencyLevelTypes); </script> <style> .emergency-selector { display: inline-flex; align-items: center; justify-content: flex-start; } .emergency-icon-content { margin-left: 10px; margin-right: 24px; } .emergency-icon-default { font-size: 24px; border: 3px dashed; border-radius: 50%; padding: 5px; } .emergency-status-value { font-size: 14px; line-height: 22px; } .emergency-status-label { color: #999; } </style>
给心灵一个纯净空间,让思想,情感,飞扬!