Vue中v-model的原理

原理:

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

作用：

提供数据的双向绑定

数据变，视图跟着变

视图变，数据跟着变

注意：

$event用于在模板中，获取事件的形参

在自定义组件中使用v-model

Vue中规定自定义组件要想使用v-model，保证自定义组件接收value，抛出input事件

如果想要不抛出input事件，可以设置model属性

在Vue中，model是指将表单控件的值与组件实例的数据模型绑定起来的一种机制。通常情况下，我们将表单控件的值存储在组件实例的data对象中，然后通过v-model指令将视图上的表单控件和该属性绑定起来，从而实现数据的双向绑定。

这样做有以下几个好处：

1. 简化代码 使用v-model指令可以非常方便地实现表单数据的绑定，而不需要手动监听每个表单控件的变化事件和触发组件实例的数据更新方法，大大简化了编写表单交互逻辑的代码量。
2. 提高可读性 采用v-model指令的方式，可以让代码的意图更加明确和易于理解，尤其是对于复杂的表单场景，使用v-model可以避免代码过于冗长和难以维护的情况。
3. 实现数据双向绑定 由于Vue采用了响应式编程的方式，因此使用v-model指令可以实现数据的双向绑定，即当表单控件的值变化时，组件实例的数据相应地自动更新；反之，当组件实例的数据变化时，表单控件的值也随之自动更新，从而达到更加灵活和高效的数据交互。

总之，Vue中的model机制是实现表单数据绑定和数据双向绑定的关键机制，为我们编写更加简洁、易读和强大的表单交互代码提供了帮助。

父组件：

<template>
  <div>
    <input type="text" :value="newValue" @keyup.enter="change" @input='msg = $event.target.value' >
    <button @click="change">点击提交数据</button>
    <span>您下面的数据选择了:{{ city }}</span>
    <div>
      这里是留言的内容：
      {{ msg }}
    </div>
    <son :checked ='city' @ch="city = $event" v-model="city"></son>

    </div>
</template>

<script>
import son from './components/VMdel/son.vue'
// v-model的原理是语法糖就是在文本上v-bind绑定value值，然后监听input事件
export default {
  data(){
    return{
      value:'',
      msg:'我是默认值',
      newValue:'',
      city:'2'
    }
  },
  components:{
    son,
  },
  methods:{
    change(){
      this.msg = this.value
      this.value = ''
    },
    newV(val){
      this.city = val
    }
  }
}
</script>

 子组件

<template>
  <div>
    <select :value="checked"  @change="change">
      <option value="1">北京</option>
      <option value="2">武汉</option>
      <option value="3">南京</option>
      <option value="4">西安</option>
      <option value="5">青岛</option>
    </select>
    <!-- <button @click="change">点击修改导航</button> -->
  </div>
</template>

<script>
export default {
  props:['checked'],
  data(){
    return{
      // val:this.checked
    }
  },
  model:{
    prop:'checked',
    event:'ch'
  },
  methods:{
    change(e){
      this.$emit('ch',e.target.value)
      // console.log(this.val);
    }
  }
}
</script>

表单类组件封装& v-model简化代码