>[warning] 父子組件雙向綁定 --- 例: 封裝一個表單輸入框的組件, 需要傳入一個變量綁定, 同時此變量需雙向數據綁定的. 寫法如下: (當然props的vModel名字隨便) ``` 頁面組件上: <my-input v-model="val"></my-input> data() { return{ val: "" } } 封裝組件MyInput.vue內: <div> <input type="text" v-model="vModel"> </div> props: { vModel: String } ``` 漂亮, 報錯了:  emmm~ 大概意思是: 避免直接改變props屬性 >[info] 解決方案, 使用v-model --- 子組件使用指令v-model來綁定val變量 (實際上value - val關聯上) 子組件內需要修改下, 既然不能直接修改props, 那么我們就接收v-model傳入的value值獲取, 觸發v-model底層實現的原理 @input事件, 把值傳回給表單value屬性, 再同步給val變量 ``` 封裝組件MyInput.vue內: <div> <input type="text" v-model="vModel"> </div> props: { value: String // v-model內部原理, 默認綁定的屬性是value值 }, computed: { vModel: { set (val) { this.$emit("input", val); // 觸發v-model內部的input事件, 把值綁定給表單的value屬性 }, get () { return this.value; } } } ```