封装组件//自己实现一个 v-model

v-model中的实现原理及如何自定义v-model

1.v-model可以看成是value+input方法的语法糖。
2.组件的v-model就是value+input方法的语法糖。
3.可以绑定v-model的有：input，checkbox，select，textarea，radio

封装的组件
利用了 input 的 value属性 和 input事件

<template>
  <div>
    <input type="text" :value="val" @input="change">
  </div>
</template>

<script>
export default {
  name: 'InputValue',
  components: {},
  props: {
    val: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
    }
  },
  computed: {},
  mounted() {},
  methods: {
    change(e) {
      this.$emit('getInput', e.target.value)
    }
  }
}
</script>

引用组件

<template>
  <div>review22
    <input v-model="myVal" type="text">
    <input-value :val="myVal" @getInput="handleInput" />
  </div>
</template>

<script>
import InputValue from '../review20210718/components/2'

export default {
  components: { InputValue },
  data() {
    return {
      myVal: ''
    }
  },
  methods: {
    handleInput(tar) {
      this.myVal = tar
    }
  }
}
</script>