vue组件实现双向绑定，使用组件时v-model直接取值（双向绑定）

<template>
  <div>
    <input type="text" v-model="inputVal" />
  </div>
</template>

<script>
export default {
  //主
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      inputVal: "",
    };
  },
  watch: {
    // 两种监听写法 

    //将值发送出去
    inputVal(val) {
      this.inputVal = val;
      this.$emit("change", val);
    },
    //取值进行渲染
    value: {
      handler(val) {
        this.inputVal = val;
      },
      immediate: true,
    },
  },
};
</script>

<style>
</style>