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 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>