1. v-model、@input 实现双向绑定数据

<template>
  <div id="app">
    <div>
      <label>value、@input实现双向绑定数据：</label>
      <input :value="v1" @input="event1">
      <div>输入框中的值：{{ v1 }}</div>
    </div>
    <div>
      <label>v-model实现双向绑定数据：</label>
      <input v-model="v2">
      <div>输入框中的值：{{ v2 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      v1: '',
      v2: '',
    }
  },
  methods: {
    event1(e) {
      this.v1 = e.target.value
    },
  },
}
</script>

2. v-model 在组件中使用（简化代码：等价于@input方式）

1. 在父组件中、使用 v-model 在子组件上绑定数据

<template>
  <div id="app">
    <div>
      <vmodel v-model="v1"></vmodel>
      <div>{{ v1 }}</div>
    </div>
  </div>
</template>

<script>
import vmodel from './components/vmodel.vue'
export default {
  name: 'App',
  components: {
    vmodel,
  },
  data() {
    return {
      v1: 'v1',
    }
  },
  methods: {
    input(v) {
      this.v1 = v
    },
  },
}
</script>

2. 在子组件中，可当作父组件已绑定 :value 和 @input

<template>
  <div>
    <div @click="changeMe()">
      点我
    </div>
    <div>{{ value }}</div>
  </div>
</template>

<script>
export default {
  name: 'vmodel',
  props: {
    value: {
      type: [String],
      default: '',
    },
  },
  methods: {
    changeMe() {
      this.$emit('input', '改变了哦')
    },
  },
}
</script>