在Vue中，父子組件傳值遵循 props down，events up 的原則
也就是說，子組件只能只讀父組件傳過來的值，但是不能直接修改，需要傳遞一個自定義事件this.$emit()的方式去發(fā)送一個事件，讓父組件去修改子組件的值

在子組件中：

<template>
  <div>
    <Input :value="value" @input="handleInput"></Input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    handleInput(event) {
      const val = event.target.value
      this.$emit('input',val)
    }
  }
}
</script>
<style>
</style>

在父組件中：

<template>
  <div>
    <son v-model="inputValue" ></son>
    <p>{{ inputValue }}</p>
  </div>
</template>
<script>
import son from './son'
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  components: {
    son
  }
}
</script>
<style>
</style>

在父組件中，其實這樣寫也是等價的：
v-model其實就是一個語法糖，把value屬性和@input結合在一起，這兩種寫法是等價的。
但是如果在子組件中通過this.$emit()發(fā)送的事件不是原生的@input事件，比如：this.$emit('son', val)，于是，我們在父組件中可以這樣寫↓↓↓

<template>
  <div>
    <son :value="inputValue" @son="handleInput"></son>
    <p>{{ inputValue }}</p>
  </div>
</template>
<script>
import son from './son'
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  components: {
    son
  },
  methods: {
    handleInput(val) {
      this.inputValue = val
    } 
  }
}
</script>
<style>
</style>