Vue의 입력 구성요소 캡슐화 소개

이 글은 주로 Vue에서 입력 컴포넌트를 캡슐화하는 자세한 예제에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue에서 입력 컴포넌트 캡슐화

좀 바빴습니다. 최근에 업데이트가 없어서 죄송합니다. 오늘 우리는 입력 구성 요소의 캡슐화를 사용자 정의하는 방법에 대한 간단한 템플릿을 게시할 예정입니다. 코더는 실제 프로젝트에 필요한 매개 변수를 추가할 수 있습니다

제 프로젝트의 UI 다이어그램은 다음과 같습니다

코드

하위 컴포넌트에 대한 템플릿 설정

<template>
 <p class="completion-input-box">
  <span class="input-box-name">{{text}}</span>
  <input 
  type="text" 
  ref="input"
  :value="value"  
  @input="$emit(&#39;input&#39;, $event.target.value)"
  >
 </p>
</template>
<script>
export default {
 name: &#39;inputlsit&#39;,
 props: [&#39;text&#39;, &#39;value&#39;],
}
</script>

부모 컴포넌트 템플릿

<template>
 <p class="completion-input-box">
  <FromList :text="&#39;创业项目名称&#39;" v-model="projectN"></FromList>
  <FromList :text="&#39;所属公司名称&#39;" v-model="companyN"></FromList>
  <FromList :text="&#39;所属投资机构名称&#39;" v-model="mechanismN"></FromList>
 </p>
</template>
<script>
import FromList from &#39;./FromList.vue&#39;
export default {
 name: &#39;search&#39;,
 data() {
  return {
   projectN: &#39;&#39;,     // 创业项目名称
   companyN: &#39;&#39;,     // 所属公司名称
   mechanismN: &#39;&#39;    // 所属机构名称
  }
 },
 components: {
  FromList
 }
}
</script>

위는 이 글의 전체 내용입니다. 모두의 학습에 도움이 되기를 바랍니다. 더 보기 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:

Vue 구성 요소 통신 방법 소개

Vue2.0 다중 탭 전환 구성 요소 패키징 소개

Vue 드래그 앤 드롭 구성 요소 개발 소개

위 내용은 Vue의 입력 구성요소 캡슐화 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!