Vue 学习之一步一坑
1.在组件的data中的post已经声明成为prop(要从父组件中接收的数据),会使用prop默认值来代替,如果在data中也声明了一个数据,那么就会报错–解决方法,删掉data 中key的值vue.js:634 [Vue warn]: The data property "post" is already declared as a prop. Use prop default value ..
·
1.在组件的data中的post已经声明成为prop(要从父组件中接收的数据),会使用prop默认值来代替,如果在data中也声明了一个数据,那么就会报错
–解决方法,删掉data 中key的值
vue.js:634 [Vue warn]: The data property "post" is already declared as a prop. Use prop default value instead.
found in
---> <BlogPost>
<Root>
源码
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
'blog-post': {
data: function() {
return {
//key: 0,
//post: {}
}
},
template: '#blog-post',
props: ['keys', 'post'],
methods: {
}
}
2.如果v-bind 了原生默认的标签属性,就会报错
–解决办法 把key 改个名字
[Vue warn]: "key" is a reserved attribute and cannot be used as component prop.
源码
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
3.子组件修改父组件的值导致报错,应该避免直接修改父组件的值。
在vue2中,直接修改prop是被视作反模式的。由于在新的渲染机制中,每当父组件重新渲染时,子组件都会被覆盖,所以应该把props看做是不可变对象
–解决方法 不更改 quantity prop使其和父组件同步 , 而是让应该这个组件提交个事件给父组件,可以 watch quantity 变量
[Vue warn]: 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. Prop being mutated: "parentmsg"
源码
<template id="son-comp">
<div>
<h3>父组件接收到的数据: {{ parentmsg }}</h3>
<button class="btn btn-success" @click="change">点击修改父组件数据</button>
<h3>子组件自带的数据: {{ content }}</h3>
</div>
</template>
change() {
this.parentmsg = "确认将密码强制修改为999?";
}
修改后
<son
v-bind:parentmsg="msg"
@button="msg = $event"
></son>
<template id="son-comp">
<div>
<h3>父组件接收到的数据: {{ parentmsg }}</h3>
<!-- <button class="btn btn-success" @click="change">点击修改父组件数据</button> -->
<button class="btn btn-success" @click="$emit('button','确认将密码强制修改为999?')">点击修改父组件数据</button>
<h3>子组件自带的数据: {{ content }}</h3>
</div>
</template>
更多推荐
已为社区贡献4条内容
所有评论(0)