v-model
原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value和input事件的合写。
作用:提供数据的双向绑定。
- 数据变,视图跟着变 :value
- 视图变,数据跟着变 @input
<template>
<div>
<input v-model="msg1" type="text"> <br><br>
<input :value="msg2" type="text"> <br><br>
</div>
</template>
<script>
export default{
data(){
return{
msg1:'',
msg2:''
}
}
}
区别是v-model是双向绑定,数据和视图都会随之改变。而:value为视图随着数据变,视图改变不影响数据。
这是需要input让数据随视图改变。
$event用于在模版上,获取事件的形参
表单类组件封装
子组件不能使用v-model,需要封装实现双向绑定,因为子组件的数据是属于父组件的
父传子:数据是父组件props传递过来的,v-model拆解绑定数据
子传父:监听输入,子传父传值给父组件修改
父组件可以使用v-model简化代码,实现子组件和父组件数据双向绑定。
- 子组件中:props通过value接收,事件触发input
- 父组件中:v-model给组件直接绑定数据