今天在使用Vue進(jìn)行父子組件傳值的時(shí)候锣光，需要父組件向子組件傳值，同時(shí)子組件需要關(guān)閉父組件的彈窗，這就需要父子組件的雙向綁定鬼雀。這里我用到了.sync修飾符(在Vue2.3之后的.sync只是編譯時(shí)的語法糖)
語法糖：語法糖(syntactic sugar)是指編程語言中可以更容易的表達(dá)一個(gè)操作的語法硝皂，它可以使程序員更加容易去使用這門語言：操作可以變得更加清晰常挚、方便，或者更加符合程序員的編程習(xí)慣稽物。好處：使用語法糖奄毡，讓我們寫的代碼更簡(jiǎn)單，看起來也更容易理解
語法糖是語言中的一個(gè)構(gòu)件贝或，當(dāng)去掉該構(gòu)件后吼过，并不影響語言的功能和表達(dá)能力。
簡(jiǎn)而言之咪奖，語法糖是一種便捷寫法
官網(wǎng)介紹：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
先上代碼
//父組件
<el-dialog title="修改科室信息" :visible.sync="dialogFormVisible">
<dep-edit :department="department" :visible.sync="dialogFormVisible" @select="select"></dep-edit>
</el-dialog>
data() {
return {
dialogFormVisible:false,
department:{},
};
},
methods: {
select() {
//略
}
}
//子組件
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="update">修改</el-button>
</div>
props: {
department: {
type: Object,
default: {}
},
},
methods: {
close(){
this.$emit('update:visible', false)
},
update(){
this.$emit('select')
this.$emit('update:visible', false)
},
}
效果圖
這里我用到了單向數(shù)據(jù)傳遞(department)盗忱、事件傳遞(select、visible)
1羊赵、數(shù)據(jù)傳遞
當(dāng)你要從父組件向子組件傳遞數(shù)據(jù)時(shí)趟佃，在父組件中用 :department="department" 將數(shù)據(jù)傳遞到子組件，在子組件中用props接收該屬性，即可在子組件中使用該屬性數(shù)據(jù)闲昭。
2罐寨、數(shù)據(jù)傳遞 事件綁定=“雙向綁定” .sync
在上面的代碼中，我需要在子組件中改變父組件的dialogFormVisible屬性的值序矩，用于控制彈窗的關(guān)閉鸯绿。
這里在父組件中使用 .sync
:visible.sync="dialogFormVisible"
上面說到，.sync只是編譯時(shí)的語法糖簸淀，即編譯時(shí)該寫法會(huì)被擴(kuò)展為
v-bind:visible="dialogFormVisible" v-on:update:visible="val=>dialogFormVisible=val"
前一個(gè)式子將數(shù)據(jù)傳遞給子組件瓶蝴，后一個(gè)式子綁定事件到組件。
這里我在子組件中沒用到visible啃擦，所以就沒用props接收囊蓝。所以實(shí)際上我只用到了后面的事件。
然后在子組件中使用emit觸發(fā)當(dāng)前實(shí)例上的事件令蛉，附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)聚霜。
this.$emit('update:visible', false)
可以看到，我們觸發(fā)的是update:visible珠叔，也就是擴(kuò)展之后的事件蝎宇，會(huì)將dialogFormVisible的值改變?yōu)閒alse。
3祷安、事件綁定
可以看到我在父組件使用子組件時(shí)寫了個(gè)@select="select"（即v-on:select="select"）姥芥，然后在子組件中使用this.$emit('select')即可觸發(fā)該事件，與使用.sync是一樣的汇鞭，只不過我這里沒有帶參數(shù)(感興趣的朋友可以試試帶參數(shù)的寫法)凉唐。
到此，正文結(jié)束霍骄。
寫在后面台囱，為了加深印象，我又試了el-dialog的visible.sync读整，這個(gè)是element的el-dialog組件提供的Attributes
https://img2020.cnblogs.com/blog/1442109/202005/1442109-20200507104408556-1203942101.png
雖然我把我的子組件的屬性名也定義為visible簿训，但是他們兩者之間是沒有直接關(guān)系的，如果把el-dialog的.sync修飾符去掉米间，會(huì)發(fā)現(xiàn)點(diǎn)擊對(duì)話框右上角的X是關(guān)不掉對(duì)話框的强品，就是因?yàn)閐ialog組件無法操作父組件的visible綁定的元素。
