>[success] # 子傳父語法糖拆解 ~~~ 1.子傳父，這個語法糖，是對 vue是單向數據流綁定的因此，你子組件直接去改父組件 的值就會產生vue警告，這種的解決方法除了官方介紹'$emit'這種傳統的方法，也有提供 的語法糖'sync'和'v-model' ，本章節就是對這兩個語法糖的講解 ~~~ >[info] ## v-model 組件語法糖 ~~~ 1.當'input' 作為組件的一部分并且還要需要和父組件聯動的時候，整個子組 件內的'input' 就已經不能在使用v-model 的形式，因為vue數據傳遞是單向 的，在子組件中使用了v-model 的形式就會出現，沒有觸發改變父組件值 的問題 2.'v-model' 作為語法糖時候，在父組件調用的子組件上只能用一次 ~~~ >[danger] ##### 不使用的效果 ~~~ 1.利用傳統的寫法，父組件給子組件傳入，子組件用'props'接受，然后子組 件再用'$emit'綁定父組件方法，通過父組件的方法改變自己的值 ~~~ * 子組件 ~~~ <template> <div> <input @input="handleChange" :value="username"/> </div> </template> <script> export default { name: "MyInput", props:{ username:String, }, methods:{ handleChange(e){ this.$emit('change',e.target.value) } } } </script> <style scoped> </style> ~~~ * 父組件 ~~~ <template> <div> <MyInput @change="pChange" :username="pUserName"></MyInput> {{pUserName}} </div> </template> <script> import MyInput from '@/components/MyInput.vue' export default { components: { MyInput }, data() { return { pUserName:'' }; }, methods:{ pChange(val){ this.pUserName = val } } }; </script> ~~~ >[danger] ##### 使用語法糖v-model -- 配合model屬性 ~~~ 1.首先'v-model'我們都知道是'@input' 和 ':value'的縮寫，但不是絕對唯一， 當我們想重新規定，我們自己的'v-model'觸發條件的時候可以使用'model' 2.下面案例就是定義了監聽的值從'value' 變成了'username',觸發的事件 'input'變成'change' ~~~ * 子組件 ~~~ 1.子組件規定了調用的時候'v-model' 將觸發雙向綁定的值和事件，分別是 'username'屬性 和'change'事件會觸發 ~~~ ~~~ <template> <div> <input @input="handleChange" :value="username"/> </div> </template> <script> export default { name: "MyInput", model: { prop: "username", // 默認 value event: "change" // 默認 input }, props:{ username:String, }, methods:{ handleChange(e){ console.log(this.username) this.$emit('change',e.target.value) } } } </script> <style scoped> </style> ~~~ * 父組件 ~~~ <template> <div> <MyInput v-model="username"></MyInput> {{username}} </div> </template> <script> import MyInput from '@/components/MyInput.vue' export default { components: { MyInput }, data() { return { username:'' }; }, }; </script> ~~~ >[danger] ##### 不要被輸入框的案例限制思路 ~~~ 1.也可以通過點擊按鈕形成v-mdoel的語法糖，但前提要注意需要配 置'model' 默認使用'change' 事件 ~~~ * 子組件、 ~~~ <template> <div> <input :value="username"/> <a @click="handleChange">111</a> </div> </template> <script> export default { name: "MyInput", model: { prop: "username", // 默認 value event: "change" // 默認 input }, props:{ username:String, }, methods:{ handleChange(e){ this.$emit('change','111') } } } </script> <style scoped> </style> ~~~ * 父組件同上 >[danger] ##### sync 的語法糖解決v-mdoel只能出現一次的問題 ~~~ 1.sync 的語法糖其實是@input的縮寫 2.下面案例直接是一個'v-model' 和'sync'的縮寫和非縮寫的案例 ~~~ * 子組件 ~~~ <template> <div> <select :value="phoneInfo.areaCode" placeholder="區號" @change="handleAreaCodeChange" > <option value="+86">+86</option> <option value="+60">+60</option> </select> <input :value="phoneInfo.phone" type="number" placeholder="手機號" @input="handlePhoneChange" /> <input :value="zipCode" type="number" placeholder="郵編" @input="handleZipCodeChange" /> </div> </template> <script> export default { name: "PersonalInfo", // v-model 定義使用的 model: { prop: "phoneInfo", // 默認 value event: "change" // 默認 input }, props: { phoneInfo: Object, zipCode: String }, methods: { handleAreaCodeChange(e) { this.$emit("change", { ...this.phoneInfo, areaCode: e.target.value }); }, handlePhoneChange(e) { this.$emit("change", { ...this.phoneInfo, phone: e.target.value }); }, handleZipCodeChange(e) { this.$emit("update:zipCode", e.target.value); } } }; </script> ~~~ * 父組件 ~~~ <template> <div> <PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode" /> <PersonalInfo :phone-info="phoneInfo" :zip-code="zipCode" @change="val => (phoneInfo = val)" @update:zipCode="val => (zipCode = val)" /> phoneInfo： {{ phoneInfo }} <br /> zipCode： {{ zipCode }} </div> </template> <script> import PersonalInfo from '@/components/test.vue' export default { components: { PersonalInfo }, data() { return { phoneInfo: { areaCode: "+86", phone: "" }, zipCode: "" }; } }; </script> ~~~