Vue 组件间的数据绑定

在Vue组件中，v-model指令可以用来实现双向数据绑定。它用于将组件的属性和父组件中的数据进行双向绑定，使得当属性的值改变时，父组件中的数据也会相应地改变，并且当父组件中的数据改变时，属性的值也会相应地改变。

目录

v-model

表单类组件使用v-model简化绑定

化简前

化简后

---

v-model

原理：v-model本质上是一个语法糖（语法简写）。例如应用在输入框（不同元素的原表示不同，所以这里只举例输入框）上,就是value属性和input事件的合写。

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

1. 数据发生改变,页面会自动变:value
2. 页面输入改变,数据会自动变@input

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

App.vue

<template>
  <div class="app">
    <input type="text" v-model="msg1" />
    <br />

    <input type="text" :value="msg2" @input="msg2 = $event.target.value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script>