右侧按钮切换

ChangeSetType

<template>
	<ul class="page-set-list">
	<li
	:class="{'active': value === 1}" @click="setActive(1)">
		<i class="icon page"></i>
		页面设置
	</li>
	<li
	:class="{'active': value === 2}" @click="setActive(2)">
		<i class="icon component"></i>
		组件管理
	</li>
	
	</ul>	
</template>
<script>

props: {
	value: {
		type:Number,
		default:1
	}
},
methods: {
	setActive(val) {
		this.$emit('input',val)
	}

}

</script>
<style>

</style>

setActive逻辑

1. 通知父组件，用$emit，传递val；父组件用v-model，setType

pageRight

<template>
	<div class="page-right">
		<ChangeSetType v-model="setType">
	</div>
</template>
computed: {
	setType: {
		get: function () {
			return this.$store.state.setType
		},
		set: function(val) {
			this.$store.commit('SET_SETTYPE',val)
		}
	}
}

按钮切换的逻辑：
为了改变store中的setType

1. 子组件设置setActive，点击页面设置的时候传参1，组件管理传参2，在setActive下和父组件pageRight双向绑定，把val传给父组件绑定的函数为setType，用computed监听setType的值的变化，改变store中的setType值。