vue练习：父组件获取子组件里input的值

在学习vue2时有学过数据绑定

通过v-model可以把input的值实时同步到data里，这样就可以使用input的值了。

在后面的练习里会经常存在一些子组件里有input，但需要把input的值在父组件里使用，我现在意识到解决这种情况的方法就是利用了v-model的原理。

首先父组件给子组件传参，子组件通过props接收这个值，并把它用于input的value值。

然后父组件给子组件传一个函数，给子组件的input添加输入事件，在输入事件的函数里调用父组件传过来的函数，同时把input的值当做实参传过去。

当父组件被调用时，把接受到的实参赋值给父组件里的变量，这样就能实现父组件获取子组件里input的值。

 <PayInvoice
      :value="invoice"
      @fetchInvoiceInfo="fetchInvoiceInfo"
    />


data() {
    return {
      invoice: '' // 发票信息
    }
  },
methods: {
    // 获取发票信息
    fetchInvoiceInfo(e) {
      this.invoice = e
    }
  }

//以上是父组件

<input type="text" :value="value" @input="changeValue($event)" placeholder="请输入发票信息"/>

props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    changeValue(e) {
      this.$emit('fetchInvoiceInfo', e.target.value)
    }
  }

//以上是子组件

感觉好像有更好的写法，但是想不起来了，以后遇到了再来记录下