组件中的双向数据绑定

目录

v-model

作用        

本质

v-model绑定步骤

.sync修饰符

作用

本质

.sync绑定步骤

---

v-model

作用        

        实现数据的双向绑定

        1、数据改变，视图随之发生改变（数据由父组件提供，子传父）

        2、视图改变，数据同时发生改变（子组件数据发生改变，父组件数据同时发生改变）

本质

        v-model默认会利用名为value的prop和名为input的事件

v-model绑定步骤

        1.子组件中：props通过value接收，事件触发input

        2.父组件中：v-model给组件直接绑定数据

//父组件中的子组件
<Son v-model='selectId'></Son>


//子组件
<select :value='value' @change="handleChange"></select>
props:{
    value:String
},
methods:{
    handleChange(e){
        this.$emit('input',e.target.value)
    }
}

.sync修饰符

作用

        实现子组件与父组件数据的双向绑定

本质

        ：属性名+@update:属性名

.sync绑定步骤

//父组件中的子组件
<Son :visible.sync='isShow'></Son>


//子组件
props:{
    visible:Boolean
}
this.$emit('update:visiable',flase)

        1.父组件：给属性添加.sync修饰符

        2.子组件：props接收属性，$emit('update:属性名'，传递值)