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>