Vue(8)——v-model原理

v-model

原理:v-model本质上是一个语法糖。例如应用在输入框上，就是value和input事件的合写。

作用：提供数据的双向绑定。

1. 数据变，视图跟着变 :value
2. 视图变，数据跟着变 @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简化代码，实现子组件和父组件数据双向绑定。

1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接绑定数据