報(bào)錯(cuò)翻譯：避免直接更改一個(gè)prop，因?yàn)槊慨?dāng)父組件重新渲染時(shí)，該值都會(huì)被覆蓋。相反，應(yīng)使用基于prop值的數(shù)據(jù)或計(jì)算屬性。正在更改的prop：“activeId”
解決辦法，使用基于prop的值，即把名為activeId的prop的值放在另一個(gè)變量中，對那個(gè)變量進(jìn)行修改，不修改activeId。
1、實(shí)現(xiàn)功能

有三個(gè)頁面，共用一個(gè)頂部導(dǎo)航，頂部導(dǎo)航封裝為一個(gè)組件，原始代碼如下，切換時(shí)報(bào)錯(cuò)：
2、組件代碼
activeId為傳遞的值，用于存放某一頁導(dǎo)航選中的索引記錄。

<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: '農(nóng)機(jī)管理',
						path: 'machineList',
					},
					{
						name: '服務(wù)管理',
						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、調(diào)用組件頁面代碼
該頁面為農(nóng)機(jī)管理，activeId等于1。

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

————————————————————————————————————
上述代碼報(bào)錯(cuò)，以下是修改。
4、修改。調(diào)用組件頁面不用更改，僅修改組件。聲明一個(gè)新的變量activeTemp，對它進(jìn)行修改。


文章來源地址http://www.zghlxwxcb.cn/news/detail-774980.html

<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: '農(nóng)機(jī)管理',
						path: 'machineList',
					},
					{
						name: '服務(wù)管理',
						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>

到了這里，關(guān)于[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！