知道vue中的v-model是怎样运作的吗

v-model是用来做双向绑定的，这个大家都都知道，可是它是如何实现双向绑定的呢

<input v-model="abc">

将这个写法，分解一下，相当于如下：

<input  :value="abc" @input="abc=$event.target.value">

下面这种写法，很清楚的可以看出v-model中的abc属性是如何修改的

当input事件触发后，通过事件对象，获取当前事件触发对象的值，赋值给abc，这样abc就实现了双向绑定

v-model不仅可以用在input  textarea  select这样的标签上 ， 还可以用于自定义组件上  原理同上

eg：

html：

<template>

  <div>

    <Box v-model="abc"></Box>

    <p>{{abc}}</p>

  </div>

</template>

js:

<script>

import Vue from "vue";

Vue.component("Box", {

  template: `<div><input @input="$emit('input',$event.target.value)"></div>`

});

export default {

  data() {

    return {

      abc: "",

    };

  }

};

</script>