如何將 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>

我提到了如何在自定義組件上啟用 v-model？ 但我無法理解

我怎樣才能做到這一點？ 提前致謝

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">

如果您想使用腳本設置，請檢查此答案