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

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

2022-10-13 last update

8 minutes reading vue tutorial typescript vite
안녕하세요 👋🏼 Vue 3 Composition API를 사용하여 입력 컴포넌트에서 값을 내보내는 방법을 알려 드리겠습니다. 작업 환경은 Vite 및 TypeScript가 포함된 Vue 3입니다.

Vue 3를 설치합니다.



터미널에서 실행하십시오npm init [email protected].
Vue는 프로젝트를 스캐폴딩하고 몇 가지 질문을 할 것입니다.

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


  • Vue 3 설치 후 새로 생성된 프로젝트로 이동하여 해당 라이브러리를 설치합니다.

  • cd vue-input-tutorial
    npm install
    


    구성 요소를 만듭니다.


  • 구성 요소 폴더로 이동하여 양식 입력 구성 요소를 만듭니다FormInput.vue.
  • 양식 입력 구성 요소 내부에 다음 코드를 복사합니다.

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


    귀하의 구성 요소를 사용합니다.


  • App.vue로 이동하여 양식 입력 구성 요소를 가져옵니다.

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


  • 위의 코드에서 두 가지 다른 예를 추가했습니다. 하나는 입력의 모든 변경 사항을 출력하고 다른 하나는 양식을 제출하고 입력 값을 콘솔에 기록합니다.
    읽어주셔서 감사합니다 👋, 내 블로그codingpr.com를 방문하세요.