vue v-model父子组件传值（以自定义菜单为例）

1.父组件

<template>
	<header-menu v-model="menuName" :list="headerMenuList"/>
</template>
<script>
	import HeaderMenu from "../../../../components/HeaderMenu";

	export default {
		name: "FormPage",
		components: {
			HeaderMenu
		},
		data() {
			return {
				menuName: 'info1',
				headerMenuList: [
					{
						title: '信息1',
						name: 'info1'
					},
					{
						title: '信息2',
						name: 'info2'
					},
					{
						title: '信息3',
						name: 'info3'
					}
				]//menu要展示的列表
			}
		}
	}
</script>

2.子组件

<template>
	<ul class="menu-wrap flex">
		<li class="menu-item" v-for="(item,index) in list" :key="index" @click="handleSelectMenu(index)"
				:class="list.length>5?'style2':'style1'"
				:style="{color: item.name === selectMenu?themeColor:'#222222',borderBottomColor: item.name === selectMenu?themeColor:'transparent'}">
			{{item.title}}
		</li>
	</ul>
</template>

<script>
	import {themeColorFunction} from '../filters/themeColorFunction';

	export default {
		name: "HeaderMenu",
		props: {
			value: String,
			list: Array
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		watch: {
			value: function (newValue) {
				this.selectMenu = newValue;
			}
		},
		data() {
			return {
				selectMenu: this.value,//选中菜单
				themeColor: themeColorFunction(localStorage.getItem('back')),//主题颜色
			}
		},
		methods: {
			handleSelectMenu(selectIndex) {
				this.selectMenu = this.list.filter((item, index) => {
					return selectIndex === index;
				})[0].name;
				this.$emit('change', this.selectMenu);
			}
		}
	}
</script>

<style scoped lang="less">
	.flex {
		display: flex;

		&-1 {
			flex: 1;
		}
	}

	.menu {
		&-wrap {
			width: 100%;
			height: 100%;
			border-bottom: 1px solid #E9E9F0;
		}

		&-item {
			line-height: 22px;
			padding-bottom: 28px;
			border-bottom: 2px solid transparent;
			cursor: pointer;
			position: relative;

			&.style1 {
				padding: 0 20px;
			}

			&.style2 {
				flex: 1;
				text-align: center;
			}

			&:after {
				display: block;
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				width: 1px;
				height: 22px;
				background-color: #E8E8E8;
			}
		}
	}
</style>