Avoid mutating a prop directly since the value will be overwritten whenever the parent component...

最新推荐文章于 2024-06-22 13:12:48 发布

有一个王小森

最新推荐文章于 2024-06-22 13:12:48 发布

阅读量3.2k

点赞数 1

分类专栏： vue.js 文章标签： vue 前端

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/84345029

版权

vue.js 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

在学习vue中的prop传递数据的时候遇到了报错。

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.
太长了，网易云翻译一下：
避免直接修改道具，因为当父组件重新呈现时，值将被覆盖。相反，使用基于道具值的数据或计算属性。
大概的意思就是：子组件从父组件拿到的数据，在使用的时候被改动了（父组件还是一样。）vue不提倡这样做，所以给你个提示。如果你非要这样做，那也没有大问题。
不过既然报了错，红红的字挺不舒服的。找个方法处理一下吧。
处理的思路
利用prop拿到父组件的值，然后在data里赋值给一个新的变量，以后操作这个新的变量就可以解决了。
代码如下。

<body>
	<div id="app">
		<buc v-bind:son1="dad1"></buc>
	</div>
</body>
<script>
	Vue.component('buc',{
		props: ["son1"],
		data: function() {
			return {son2:this.son1}//此处就是处理的地方
		},
		template: '<button v-on:click="son2++" > click+ {{son2}} </button>',
	})
	var vm = new Vue({
		el: "#app",
		data:{
			dad1:5
			}
	})
</script>

这样就把报错给消灭了。
温馨提示：子组件利用prop拿数据，就是和父组件有一个因果关系。改一个可能就会牵扯到其他。所以，这个报错提示是有必要的。至少让我们对prop有一个更深的认识。

有一个王小森

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Avoid mutating a prop directly since the value will be overwritten whenever the parent component...

在学习vue中的prop传递数据的时候遇到了报错。Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s valu...
复制链接

扫一扫