vue2自定义组件v-model实现

页面设置和组件管理切换:使用自定义组件v-model实现

  • setType是从vuex中读取的值,放在computed中
  • 父组件通过v-model将值setType传递给子组件ChangeSetType
  • 子组件接收v-model值: 使用props中固定值value接受
  • 子组件更改v-model值: 使用this.$emit("input", val),事件名必须是input
  • 父组件中因为需要接收子组件传递的值对setType进行更改,而setType是computed计算属性,所以需要使用get/set方法实现
  • get时从vuex中获取值,set时,通过vuex中的更改setType的方法对setType值进行修改

父组件:

html 复制代码
    <change-set-type v-model="setType"></change-set-type>
javascript 复制代码
  computed: {
    setType: {
      get() {
        return this.$store.state.decorate.setType;
      },
      set(newVal) {
        this.SET_TYPE(newVal);
      }
    }
  },

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

子组件:

html 复制代码
<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>