自定义组件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>
更多推荐
vue2自定义组件v
发布评论