vue自定义组件实现v-model

父组件

<template>
  <div>
    <t-input v-model="mainInput" @blur="logData" style="width: 200px"></t-input>
  </div>
</template>

<script>
import tInput from "@/components/tInput.vue";
export default {
  name: "hello",
  data() {
    return {
      mainInput: "默认值",
    };
  },
  components: {
    tInput,
  },
  methods: {
    logData(val) {
      console.log("this.mainInput", val);
    },
  },
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <el-input
      v-model="inputs"
      placeholder="请输入内容"
      @change="setInput"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: "tInput",
  props: ["value"],
  data() {
    return {
      inputs: this.value,
    };
  },
  methods: {
    setInput() {
      this.$emit("input", this.inputs);//注册input事件
      this.$emit("blur", this.inputs);//注册blur事件
    },
  },
  watch: {
    value(val) {
      this.inputs = val;//监听父组件传递过来的值来改变inputs
    },
  },
};
</script>