如何将 v-model 数据传递给自定义组件？

Question

我在 Vue 中创建了一个自定义输入组件

<template>
  <input :type="inputType" :placeholder="placeholder" v-model="vModel"  />
</template>

<script>
export default {
  name: "BaseInput",
  props: {
    inputType: String,
    placeholder: String,
    label: String,
    vModel: String,
  },
};
</script>

我不知道如何准确传递要从我们调用自定义组件的地方限定的数据

我的应用程序.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <base-input inputType="text" placeholder="Enter Name" vModel="inputName">
  </base-input>
</template>

<script>
import BaseInput from "./components/BaseInput.vue";

export default {
  name: "App",
  components: {
    BaseInput,
  },
  data() {
    return {
      inputName: "",
    };
  },
};
</script>

我提到了How to enable v-model on custom component?，但我听不懂

我怎样才能做到这一点？提前致谢

Answer 1

baseInput 应该将modelValue 定义为prop，它将绑定到输入值，使用this.$emit("update:modelValue",e.target.value) 发出新的类型值并将update:modelValue 添加到emits 选项：

<template>
  <input :type="inputType" :placeholder="placeholder" :value="modelValue" @input="onInput" />
</template>

<script>
export default {
  name: "BaseInput",
  props: {
    inputType: String,
    placeholder: String,
    label: String,
    modelValue: String,
  }, 
 emits:["update:modelValue"],
  methods:{
    onInput(e){
      this.$emit("update:modelValue",e.target.value)
    }
  }
};
</script>

在父组件中使用它：

<base-input inputType="text" placeholder="Enter Name" v-model="inputName">

如果您想使用脚本设置，请查看this answer