在学习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有一个更深的认识。

# 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue