在vue中父子組件的傳值方式，我們都比較熟悉了吧？
父傳子：props
子傳父：$emit
這個都是常識中的常識了，自不用多說。但有一種情況是，我需要在子組件中改變外層組件的傳進來的值，也就是父級組件的data值，這個應該如何實現呢？
看一個例子：
JavaScript
//父組件 <child-component :visible="visible" @onClose="closeHandler"></child-component> <script> export default{ data(){ return { visible:false } }, methods:{ show(){ this.visible = true; } closeHandler(){ this.visible = false; } } } </script> //子組件 <template> <div v-if="visible" @click="onClose">我是子組件</div> </template> <script> export default{ props:{ visible:{ type:Boolean, default:false } }, methods:{ onClose(){ this.$emit("onClose") } } } </script>以上的例子是我們最常看到的一種子組件傳值給父組件的方式，就是子用emit去發通知，父去接這個通知，再由父自己去更新自己的data.
這樣的寫法有沒有問題？當然是沒有問題的。但是有沒有更好的方法，這樣是不是很麻煩啊！我的父組件要維護的東西這樣也太多了，只是一個visible的問題，我要單獨定義一個方法去處理一下？這開銷也太大了...
沒錯，vuejs也考慮到了這點，於是就定義一個sync的標識符，用來指示這個傳入屬性是不是可以被子級直接更新修改，那下面我們來看如何使用它。
JavaScript
//父組件 visible后面了一個sync的標識符 <child-component :visible.sync="visible" @onClose="closeHandler"></child-component> <script> export default{ data(){ return { visible:false } }, methods:{ show(){ this.visible = true; } closeHandler(){ this.visible = false; } } } </script> //子組件 <template> <div v-if="visible" @click="onClose">我是子組件</div> </template> <script> export default{ props:{ visible:{ type:Boolean, default:false } }, methods:{ onClose(){ this.$emit("update:visible",true); //重點看這里，update:xxx 這個是固定的寫法，也就是你要更新哪個傳入屬性(prop)的值 } } } </script>
通過以上的兩個地方的改變，就實現了子改父的data屬性值了！
有人可能會這樣說，我傳一個對象作為prop給子級，子級就可以直接改prop的值啊，這個是沒錯，但這個是通過引用類型的引用地址不變的特點實現的，除非你是故意為之，否則這將有很大的風險，因為你的父級的屬性值可能在不知情的情況下被子級篡改了，而且很大的概率下控制台會有報錯信息。
好了，今天咕笛老師給大家講的子組件改父組件的內容就是這些，大家在平時項目中要形成組件的思想，盡可能的把通用功能寫成組件，並且持續不斷的去完善改進組件的功能，使組件用最少的傳入參數，去完成最多的功能。同學們加油吧！
原文鏈接:http://www.gudi.tech/post/13.html
