vue的双向绑定我们可以理解为以下两点

1. 当我们在页面上改变数据时，内存中的数据也会同时被改变
2. 当我们在内存中改变数据时，页面上的数据也会刷新

而双向绑定需要通过v-model实现，我们来看一下下面的例子

<template>
  <section>
    <input type="text" v-model="x"/>
    <br/>
    x : {{x}}
  </section>
</template>


<script>
  export default {
    data() {
      return {
        x: 'jack'
      }
    }
  }
</script>

上面的代码在vue中，就可以实现双向绑定了

支持双向绑定的标签

1. input
2. textarea
3. checkbox
4. radio

双向绑定的原理

v-model 其实可以理解为一个语法糖，其实他和sync修饰符类似，相当于一个监听与发布。

我们给组件传入一个值，并监听input事件，触发xxx = $event 组件内是一个input标签，它接受props，每次触发input，就将最新的props发布给外面

//component
<template>
  <div>
    <input type="text" :value="value" @input="xxx">
  </div>
</template>

<script>
  export default {
    name: "myInput.vue",
    props: {value: {type: String}},
    methods: {
      xxx(e) {
        const value = e.target.value
        this.$emit('input', value)
      }
    }
  }
</script>

//home
<template>
  <section>
    <myInput :value="x" @input="x = $event"/>
    <br/>
    x : {{x}}
  </section>
</template>


<script>
  import myInput from "./components/myInput"

  export default {
    data() {
      return {
        x: 'jack'
      }
    },
    components: {
      myInput
    }
  }
</script>