問題將復(fù)選框創(chuàng)建為 Vue 組件，特此：復(fù)選框組件內(nèi)部不允許有邏輯：所有事件處理程序和checked屬性都完全依賴于外部邏輯，可能是vuex存儲(chǔ)。我們不應(yīng)該觀察復(fù)選框“已檢查”的狀態(tài)：是否選中，再次取決于外部邏輯，例如vuex狀態(tài)或 getter。嘗試 1概念復(fù)選框組件具有checked和onClick屬性，其值當(dāng)然可以是動(dòng)態(tài)的。成分Pug語言模板：label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="onClick")  input.SvgCheckbox-InvisibleAuthenticCheckbox(    type="checkbox"    :checked="checked"    :disabled="disabled"  )  svg(viewbox='0 0 24 24').SvgCheckbox-SvgCanvas    path(      v-if="!checked"      d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'    ).SvgCheckbox-SvgPath.SvgCheckbox-SvgPath__Unchecked    path(      v-else      d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'    ).SvgCheckbox-SvgPath.SvgCheckbox-SvgPath__Checked  span(v-if="text").SvgCheckbox-AppendedText {{ text }}import { Vue, Component, Prop } from 'vue-property-decorator';@Componentexport default class SimpleCheckbox extends Vue {  @Prop({ type: Boolean, required: true }) private readonly checked!: boolean;  @Prop({ type: Boolean, default: false }) private readonly disabled!: boolean;  @Prop({ type: String }) private readonly text?: string;  @Prop({ type: String }) private readonly parentElementCssClass?: string;  @Prop({ type: Function, default: () => {} }) private readonly onClick!: () => void;}商店模塊import { VuexModule, Module, Mutation } from "vuex-module-decorators";import store, { StoreModuleNames } from "@Store/Store";@Module({ name: StoreModuleNames.example, store, dynamic: true, namespaced: true })export default class ExampleStoreModule extends VuexModule {  private _doNotPreProcessMarkupEntryPointsFlag: boolean = true;  public get doNotPreProcessMarkupEntryPointsFlag(): boolean {    return this._doNotPreProcessMarkupEntryPointsFlag;  }