vue2自定义组件v

自定义组件v"/>

vue2自定义组件v

页面设置和组件管理切换：使用自定义组件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值进行修改

 父组件：

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