使用前提：
首先，我們需要明確的是杠览，子父組件之間通訊，子組件是不能直接改變父組件的值的当宴。（父組件是大佬畜吊，小弟不能改變大佬的值，但是父組件可以改變子組件的值）
作用：
通過某種方式户矢，子組件可以”直接“改變父組件的值玲献。
方法：
場景：控制彈框的顯示與關(guān)閉。在父組件中打開子組件彈框逗嫡，然后在點(diǎn)擊子組件中的按鈕關(guān)閉彈框青自。
- 一般我們子父傳值的處理如下：
// 父組件
<template>
<div>
<input type="button"
value="打開子組件"
@click="show">
<child @changeVisibleState="changeVisible" :visible="childShow"/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
childShow:false
}
},
components:{
child
},
methods:{
show(){
this.childShow=true;
},
changeVisible(val){
this.childShow=val;
}
}
}
</script>
// 子組件
<template>
<div>
點(diǎn)我關(guān)閉子組件
<input type="button" value="點(diǎn)我隱身" @click="doClose" v-show="visible">
</div>
</template>
<script>
export default {
props:['visible']
methods:{
doClose(){
this.$emit("changeVisibleState",false);
}
}
}
</script>
- 改進(jìn)
這樣的寫法沒錯(cuò)，但是顯的比較臃腫驱证，明明我只是要改一個(gè)值延窜，就不能簡單點(diǎn)？
答案是抹锄，當(dāng)然是可以的逆瑞。
大家肯定會(huì)想，那我不能直接改變父組件的值伙单？想v-model那樣获高，多爽。
vue也是考慮到了這點(diǎn)吻育，所以提供了一個(gè)更好的解決方案念秧。
// 父組件
// 先把方法寫到行內(nèi)，箭頭函數(shù)的寫法布疼。
// 方法名為什么是update:visible摊趾，是下面子組件的emit方法定義的。
<template>
<div>
<input type="button"
value="打開子組件"
@click="show">
<child @update:visible="（val）=>{childShow = val}" :visible="childShow"
/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
childShow:false
}
},
components:{
child
},
methods:{
show(){
this.childShow=true;
}
}
}
</script>
// 子組件
<template>
<div>
點(diǎn)我關(guān)閉子組件
<input type="button" value="點(diǎn)我隱身" @click="doClose" v-show="visible">
</div>
</template>
<script>
export default {
props:['visible']
methods:{
doClose(){
// 改變子組件中的寫法
this.$emit("update:visible",false);
}
}
}
</script>
其中游两，
對(duì)于 @update:visible="（val）=>{childShow = val}" :visible="childShow"砾层，vue提供了一個(gè)語法糖，將其替換成 :visible.sync = "childShow" 贱案，這樣是不是看起來簡潔多了肛炮。
那么就變成了：
// 父組件
<template>
<div>
<input type="button"
value="打開子組件"
@click="show">
<child :visible.sync = "childShow"/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
childShow:false
}
},
components:{
child
},
methods:{
show(){
this.childShow=true;
}
}
}
</script>
// 子組件
<template>
<div>
點(diǎn)我關(guān)閉子組件
<input type="button" value="點(diǎn)我隱身" @click="doClose" v-show="visible">
</div>
</template>
<script>
export default {
props:['visible']
methods:{
doClose(){
//emit中的函數(shù)名，一定要以這種格式喲~宝踪，"update:props"侨糟，其中props就是我們子父之間通訊的值
this.$emit("update:visible",false);
}
}
}
</script>
總結(jié)：
其實(shí).sync就是一個(gè)語法糖，將我們平時(shí)正常的子父之間傳值的過程肴沫，進(jìn)行了寫法上的簡化粟害，本質(zhì)還是沒有變的。
