目录
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:属性名',传递值)