[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c

报错翻译：避免直接更改一个prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，应使用基于prop值的数据或计算属性。解决办法，使用基于prop的值，即把名为activeId的prop的值放在另一个变量中，对那个变量进行修改，不修改activeId。调用组件页面不用更改，仅修改组件。声明一个新的变量activeTemp，对它进行修改。activeId为传递的值，用于存放某一页导航选中的索引记录

文章共3,269字 · 阅读需要大约11分钟

一键AI生成摘要，助你高效阅读

问答

zttbee

5071人浏览 · 2023-11-28 13:55:25

zttbee · 2023-11-28 13:55:25 发布

报错翻译：避免直接更改一个prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，应使用基于prop值的数据或计算属性。正在更改的prop：“activeId”
解决办法，使用基于prop的值，即把名为activeId的prop的值放在另一个变量中，对那个变量进行修改，不修改activeId。
1、实现功能
在这里插入图片描述
有三个页面，共用一个顶部导航，顶部导航封装为一个组件，原始代码如下，切换时报错：
2、组件代码
activeId为传递的值，用于存放某一页导航选中的索引记录。

<template>
	<div class="headMiddle flexCenter">
		<div class="widthStyle">
			<div class="flexBetween">
				<div v-for="(item,index) in dataArray" :key="index" @click="handleChose(index)"
					:class="activeId==index?'activeItemStyle':'itemStyle'">
					<div class="jbStle"></div>
					<div class="bordStatistic">
						<div class="nameStyle">
							{{item.name}}
						</div>
					</div>
					<div class="jbStle"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "TopBar",
		components: {},
		props: {
			activeId: {
				required: true,
				type: Number
			},
		},
		data() {
			return {
				dataArray: [{
						name: '首页',
						path: 'home',

					},
					{
						name: '农机管理',
						path: 'machineList',
					},
					{
						name: '服务管理',
						path: 'serviceManage',
					},

				],
			}
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			handleChose(index) {
				this.activeId = index;
				this.$router.push(this.dataArray[index].path)
			},
		}
	};
</script>
<style lang="scss" scoped>
	.headMiddle {
		position: absolute;
		top: 12% !important;
		left: 0px;
		right: 0px;
		z-index: 2;

		.widthStyle {
			width: 40%;
			min-width: 556px;
		}

		.activeItemStyle,
		.itemStyle {
			cursor: pointer;

			.jbStle {
				width: 76px;
				height: 1px;
			}

			.bordStatistic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 76px;
				height: 32px;
				background: rgba(7, 53, 58, 0.8);

				.nameStyle {
					font-size: 13px;
					font-weight: 500;
					color: #FEFFFF;
				}
			}
		}

		.activeItemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 1);
			}

			.bordStatistic {
				background: rgba(#61FFF6, 0.2);
			}

			.nameStyle {
				text-shadow: 0px 2px 1px rgba(0, 1, 1, 0.63);
			}
		}

		.itemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 0.4);
			}
		}
	}
</style>

3、调用组件页面代码
该页面为农机管理，activeId等于1。

<TopBar :activeId='1'></TopBar>

在这里插入图片描述

————————————————————————————————————
上述代码报错，以下是修改。
4、修改。调用组件页面不用更改，仅修改组件。声明一个新的变量activeTemp，对它进行修改。
在这里插入图片描述

<template>
	<div class="headMiddle flexCenter">
		<div class="widthStyle">
			<div class="flexBetween">
				<div v-for="(item,index) in dataArray" :key="index" @click="handleChose(index)"
					:class="activeTemp==index?'activeItemStyle':'itemStyle'">
					<div class="jbStle"></div>
					<div class="bordStatistic">
						<div class="nameStyle">
							{{item.name}}
						</div>
					</div>
					<div class="jbStle"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "TopBar",
		components: {},
		props: {
			activeId: {
				required: true,
				type: Number
			},
		},
		data() {
			return {
				activeTemp:this.activeId,
				dataArray: [{
						name: '首页',
						path: 'home',

					},
					{
						name: '农机管理',
						path: 'machineList',
					},
					{
						name: '服务管理',
						path: 'serviceManage',
					},
				],
			}
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			handleChose(index) {
				this.activeTemp = index;
				this.$router.push(this.dataArray[index].path)
			},
		}
	};
</script>
<style lang="scss" scoped>
	.headMiddle {
		position: absolute;
		top: 12% !important;
		left: 0px;
		right: 0px;
		z-index: 2;

		.widthStyle {
			width: 40%;
			min-width: 556px;
		}

		.activeItemStyle,
		.itemStyle {
			cursor: pointer;

			.jbStle {
				width: 76px;
				height: 1px;
			}

			.bordStatistic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 76px;
				height: 32px;
				background: rgba(7, 53, 58, 0.8);

				.nameStyle {
					font-size: 13px;
					font-weight: 500;
					color: #FEFFFF;
				}
			}
		}

		.activeItemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 1);
			}

			.bordStatistic {
				background: rgba(#61FFF6, 0.2);
			}

			.nameStyle {
				text-shadow: 0px 2px 1px rgba(0, 1, 1, 0.63);
			}
		}

		.itemStyle {
			.jbStle {
				background-color: rgba($color: #61FFF6, $alpha: 0.4);
			}
		}
	}
</style>