Vue父子组件传值

在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>