Implementierung des benutzerdefinierten V-Modells der vue2-Komponente

Seiteneinstellungen und Komponentenverwaltungsumschaltung: implementiert mit benutzerdefiniertem Komponenten-V-Modell

•     setType ist der aus vuex gelesene und in berechnete Wert eingefügt
•     Die übergeordnete Komponente übergibt den Wert setType über das V-Modell an die untergeordnete Komponente ChangeSetType
•     Unterkomponente erhält V-Modell-Wert: Verwenden Sie zum Akzeptieren einen festen Wert in den Requisiten
•     Unterkomponente ändert den V-Modellwert: Verwenden Sie this.$emit("input", val), der Ereignisname muss eingegeben werden
•     In der übergeordneten Komponente muss der von der untergeordneten Komponente übergebene Wert empfangen werden, um setType zu ändern. Da setType eine berechnete Eigenschaft ist, muss sie mithilfe der get/set-Methode implementiert werden.
•     Rufen Sie beim Abrufen den Wert von vuex ab. Ändern Sie beim Festlegen den setType-Wert über die Methode zum Ändern von setType in vuex.

 Übergeordnete Komponente:

    <change-set-type v-model="setType"></change-set-type>

  computed: {
    setType: {
      get() {
        return this.$store.state.decorate.setType;
      },
      set(newVal) {
        this.SET_TYPE(newVal);
      }
    }
  },

  methods: {
    ...mapMutations("decorate", ["SET_TYPE"])
  }

Unterbaugruppe:

<template>
  <ul class="page-set-list">
    <li :class="value==1?'active':''" @click="setAcive">
      <i class="icon page"></i>
      页面设置
    </li>
    <li :class="value==2?'active':''" @click="setAcive">
      <i class="icon component"></i>
      组件管理
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    setAcive() {
      let type = this.value === 1 ? 2 : 1;
      this.$emit("input", type);
    }
  }
};
</script>