vue2 カスタム コンポーネントの v-model 実装

ページ設定とコンポーネント管理の切り替え: カスタム コンポーネント v-model を使用して実装

•     setType は vuex から読み取られ、計算結果に配置される値です。
•     親コンポーネントは、v-model を通じて値 setType を子コンポーネント ChangeSetType に渡します。
•     サブコンポーネントは v-model 値を受け取ります: 受け入れるために props で固定値の値を使用します
•     サブコンポーネントの v-model 値の変更: this.$emit("input", val) を使用します。イベント名を入力する必要があります
•     親コンポーネントでは、setType を変更するために子コンポーネントによって渡された値を受け取る必要があります。また、setType は計算プロパティであるため、get/set メソッドを使用して実装する必要があります。
•     取得する場合はvuexから値を取得し、設定する場合はvuexのsetTypeを変更するメソッドでsetTypeの値を変更します。

 親コンポーネント:

    <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"])
  }

サブアセンブリ:

<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>