Vue 에서 input 구성 요 소 를 패키지 하 는 인 스 턴 스 상세 설명

1922 단어 Vue패키지 입력
Vue 에서 input 구성 요 소 를 패키지 합 니 다.
요즘 좀 바 빠 서 오래 벗 었 는데 업데이트 가 안 돼 서 죄송합니다.오늘 은 패키지 input 구성 요 소 를 어떻게 사용자 정의 하 는 지,블 로 거 지식 은 간단 한 템 플 릿 코드 를 보 내 는 친구 들 이 자신의 실제 프로젝트 에 필요 한 인 자 를 추가 할 수 있 습 니 다.
제 프로젝트 의 UI 그림 은 이 렇 습 니 다.

코드 는 다음 과 같다.
하위 구성 요소 의 템 플 릿 설정

<template>
 <div class="completion-input-box">
  <span class="input-box-name">{{text}}</span>
  <input 
  type="text" 
  ref="input"
  :value="value"  
  @input="$emit('input', $event.target.value)"
  >
 </div>
</template>
<script>
export default {
 name: 'inputlsit',
 props: ['text', 'value'],
}
</script>
부모 구성 요소 템 플 릿

<template>
 <div class="completion-input-box">
  <FromList :text="'      '" v-model="projectN"></FromList>
  <FromList :text="'      '" v-model="companyN"></FromList>
  <FromList :text="'        '" v-model="mechanismN"></FromList>
 </div>
</template>
<script>
import FromList from './FromList.vue'
export default {
 name: 'search',
 data() {
  return {
   projectN: '',     //       
   companyN: '',     //       
   mechanismN: ''    //       
  }
 },
 components: {
  FromList
 }
}
</script>
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기