Vue(8)——v-model原理

v-model

原理:v-model本质上是一个语法糖。例如应用在输入框上，就是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让数据随视图改变。

表单类组件封装 

子组件不能使用v-model，需要封装实现双向绑定，因为子组件的数据是属于父组件的

父组件可以使用v-model简化代码，实现子组件和父组件数据双向绑定。