复选框的双向绑定不会发生

Question

对于下面发布的代码

vue

组件，它是一个子组件，托管在特定的父组件中。当我通过引入对

vModelCheckGeoTIFFOverlayBandAverages

的更改来通过

compPropsVModelCheckGeoTIFFOverlayBandAverages

进行两种绑定方式时，更改 不会反映在父组件中。

我是否把

checkbox

的装订弄错了

代码：

<template>
    <cds-checkbox id="idCheckboxGeoTIFFOverlayBandAveragesContainer">
        <label id="idTextGeoTIFFOverlayBandAverages">{{ tempTextBandAverages }}</label>
        <input
            type="checkbox"
            :value="compPropsVModelCheckGeoTIFFOverlayBandAverages"
            @input="$emit('update:compPropsVModelCheckGeoTIFFOverlayBandAverages', $event.target.checked)"
            :disabled="isCheckboxGeoTIFFOverlayBandAveragesDisabled"
            :checked="compPropsVModelCheckGeoTIFFOverlayBandAverages"
            @change="onCheckboxGeoTIFFOverlayBandAveragesChanged"
        />
    </cds-checkbox>
</template>

<script>
import { GeoTIFFOverlaySettingsConstants } from '../../../resources/....';
import { StoreOnCheckboxBandAveragesStatusChanged } from '../../../../../...';

let msg = null;

export default {
    name: 'SentinelHubGeoTIFFOverlayBand1',
    data() {
        return {
            refStoreOnCheckboxBandAveragesStatusChanged: StoreOnCheckboxBandAveragesStatusChanged,
            isCheckboxChecked: false,
            tempTextBandAverages: GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description,
        };
    },
    components: {},
    props: {
        isCheckboxGeoTIFFOverlayBandAveragesDisabled: {
            type: Boolean,
            default: true,
        },
        vModelCheckGeoTIFFOverlayBandAverages: {
            type: Boolean,
            default: null,
        },
    },
    emits: {
        'update:vModelCheckGeoTIFFOverlayBandAverages':null,
    },
    computed: {
        compPropsVModelCheckGeoTIFFOverlayBandAverages: {
            get() {
                return this.vModelCheckGeoTIFFOverlayBandAverages;
            },
            set(value) {
                this.$emit('update:vModelCheckGeoTIFFOverlayBandAverages', value);
            },
        },
    },
    watch: {
        isCheckboxChecked(newVal, oldVal) {
            this.compPropsVModelCheckGeoTIFFOverlayBandAverages = newVal;
        },
    },
    methods: {
        async onCheckboxGeoTIFFOverlayBandAveragesChanged() {
            this.isCheckboxChecked = !this.isCheckboxChecked;
            await this.refStoreOnCheckboxBandAveragesStatusChanged.actions.init();
            this.refStoreOnCheckboxBandAveragesStatusChanged.setters.set(this.isCheckboxChecked);
        },
    },
};
</script>

上面问题中已经解释了

Answer 1

输入会发出

update:compPropsVModelCheckGeoTIFFOverlayBandAverages

事件，而事件的名称是

update:vModelCheckGeoTIFFOverlayBandAverages

。这说明了长命名的问题。

v-model

已经建议了约定、“modelValue”属性和“update:modelValue”事件。只要组件处理一个值，这些名称都是明确的并且可以按照惯例使用。

将其与

v-model

和

input

等原生元素一起使用，而不是直接使用 props 和事件，仍然是有益的，因为这样可以跳过

$event.target.checked

等低级细节，并使代码更短，更不易出错。

尚不清楚组件是否需要拥有自己的本地状态。如果不需要，组件状态就不需要

data()

，并且名称可以保持简短易懂：

<label id="idTextGeoTIFFOverlayBandAverages">{{ labelText }}</label>
<input
  type="checkbox"
  v-model="isChecked"
  :disabled="disabled"
/>

和

props: {
    modelValue: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
},
emits: {
    'update:modelValue':null,
},
data() {
    return {
        labelText: GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description,
    };
},
computed: {
    isChecked: {
        get() {
            return this.modelValue;
        },
        set(value) {
            this.$emit('update:modelValue', value);
        },
    },
},
watch: {
    isChecked(newVal, oldVal) {
      // can be used to do anything on value updates, e.g. sync a store
    },
}

并且应该用作：

或者不带

v-model

，用法比带

input

更直接：

<SentinelHubGeoTIFFOverlayBand1
  :modelValue="someValue"
  @update:modelValue="updateSomeValue"
  :disabled="someDisabled"/>