입력 구성 요소 Vue 3에서 값을 방출하는 방법.

Vue 3를 설치합니다.

Project name: … vue-input-tutorial
Add TypeScript? Yes

cd vue-input-tutorial
npm install

구성 요소를 만듭니다.

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

defineProps({
  modelValue: String,
  name: String,
  type: String,
});

defineEmits(["update:modelValue"]);
</script>

<template>
  <div>
    <label class="px-3" for="name">{{ name }}</label>
    <input
      :type="type"
      :value="modelValue"
      @input="
        $emit('update:modelValue', ($event.target as HTMLInputElement).value)
      "
      :placeholder="name"
    />
    <br />
  </div>
</template>

귀하의 구성 요소를 사용하십시오.

<script setup lang="ts">
import { ref } from "vue";
import FormInput from "./components/FormInput.vue";

const email = ref("");

// output value key by key
const onInput = (e: { target: { value: string } }) => {
  email.value = e.target.value;
};

// output value on submit
const Submit = () => {
  console.log(email.value);
};
</script>

<template>
  <form @submit.prevent="Submit">
    <FormInput
      v-model="email"
      name="E-mail"
      type="email"
      @input="onInput"
    />
      <button type="submit">Submit</button>
    </form>
    <div>{{ email }}</div>
</template>