在Vue中，父子组件传值遵循 props down，events up 的原则
也就是说，子组件只能只读父组件传过来的值，但是不能直接修改，需要传递一个自定义事件this.$emit()的方式去发送一个事件，让父组件去修改子组件的值
在子组件中：
<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()发送的事件不是原生的@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>
