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);
    }
}