子組件接收父組件需要暴露props匿刮，但是props是單向流僧凰，在子組件中不能更改prop的值，否則報(bào)錯(cuò)熟丸。在開發(fā)過程中會(huì)有這種需求，既要接收父組件的傳值光羞，又要在子組件改變其值绩鸣。通常的辦法是通過監(jiān)聽子組件的props觸發(fā)$emit傳值給父組件纱兑，如下：
子組件：
props: {
//這個(gè)是接收父組件的傳值
prop1: {
required: true,
type: Number,
default: 1
}
},
//監(jiān)聽呀闻，并通知父組件接收
watch: {
//子組件中直接使用prop1
prop1( newValue ) {
//父組件需要通過觸發(fā)propChange事件接收newValue值
this.$emit( 'propChange', newValue )
}
}
父組件：
<children
@propChange = 'propChange'
/>
methods: {
propChange( value ) {
//這個(gè)value就是子組件傳過來的值
console.log( value ) ;
}
}
上面的方法相對(duì)比較麻煩，父組件需要通過觸發(fā)事件來獲取更新值萍启，如果子組件比較多，方法維護(hù)起來比較麻煩（最頭疼的是命名 - _ -）,vue 2.3.0+ 新增了語法糖 .sync 勘纯，可以更便捷的處理父子組件的數(shù)據(jù)同步局服。
子組件：
<template>
<div class="">
<div> {{ prop1 }} </div>
<button @click="$emit( 'update:prop1', prop1 +1 )">+1</button>
</div>
</template>
props: {
//這個(gè)是接收父組件的傳值
prop1: {
required: true,
type: Number,
default: 1
}
}
父組件：
//利用.sync修飾符雙向綁定驳遵， value就是子組件傳來的 prop1 +1
<children :prop1.sync = 'value' />
.sync 是處理prop 雙向綁定時(shí)比較推薦的方法，但是在 .sync之前的 vue 2.2.0+ 已經(jīng)增加了一個(gè)雙向綁定的語法糖 v-model堤结，是的唆迁，就是input雙向綁定的v-model竞穷，這其實(shí)也是一個(gè)語法糖，只是默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件瘾带，所以在使用v-model處理非表單的雙向綁定時(shí)鼠哥，盡量避免使用value的prop名和input的事件名看政，當(dāng)然也不是不能用，只是盡量避免沖突的可能允蚣。下面是v-model的雙向綁定例子：
子組件：
<template >
<div> {{ prop1 }} </div>
//這里不能用 prop1++于颖，因?yàn)?+ 等同于 prop1 = prop1 +1嚷兔，這就直接改變了prop1的值了森渐，在子組件中是不允許的，傳值 prop1 +1給父組件章母，子組件再接收父組件的值才是正確的邏輯母蛛。
<button @click="$emit( 'change', prop1 +1 )"> 加一個(gè) </button>
</template >
//這個(gè)model對(duì)象是重點(diǎn), prop：要監(jiān)聽的屬性名乳怎，event：觸發(fā)的自定義事件名
model: {
prop: 'prop1',
event: 'change'
},
props: {
prop1: Number
}
父組件：
//這個(gè)value 就是子組件傳過來的值（prop1 +1）
<ttse v-model="value"/>
data() {
return {
value: 0
}
}
