前端开发-v-model语法糖

v-model 双向数据绑定 只能用于表单元素

表单元素的值进行了修改，这个变量的值也会跟着修改

这个变量的值进行了修改，表单元素的值也会跟着修改

v-model本质上是 value属性和input事件的一层包装

数据发生了改变，页面会自动变 v-bind:value

页面输入改变 ， 数据会自动变化 v-on:input

v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件

<template>
  <div>
    <h1>根组件App.vue</h1>
    
    <input type="text" v-model="msg" />
    <hr />
    <!-- 这种写法与上面写法功能一致 -->
    <input type="text" :value="msg" @input="msg = $event.target.value" />
    <hr />
    <!-- 这种写法也与上面写法一致 -->
    <input type="text" :value="msg" @input="doInput" />
    <hr />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    doInput(e) {
      this.msg = e.target.value;
    }
  }
};
</script>

<style>
</style>

组件使用v-model

父组件提供一个数据给子组件使用（父传子）

子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。

定义组件的时候，注意接收的值叫value， 子传父触发的事件叫 input