vue .sync 修飾符和自定義v-model的使用

VUE 是單向數據流

當我們需要對一個 prop 進行“雙向綁定”時

• vue 修飾符.sync

子組件：this.$emit('update:visible', visible)， 使用update:my-prop-name 的模式觸發事件
父組件：

<components :visible="isVisible" @update:visible="val=>isVisible=val"></components>
//簡寫
<components :visible.sync="isVisible"></components>

子組件：

this.$emit("update:visible", true);

vue 修飾符.sync的功能是：當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定。

---

• 自定義v-model”

父組件：

<components v-model="visible"></components>

子組件：

model:{
    prop: "visible",
    event: "change",
},
props: {
    visible: Boolean
},
methods: {
    handelChange(){
        this.$emit('change',!this.visible);
    }
}