Tutorial zum Kapseln von Eingabekomponenten in Vue

Dieser Artikel stellt hauptsächlich relevante Informationen zu den detaillierten Beispielen für die Kapselung von Eingabekomponenten in Vue vor. Ich hoffe, dass dieser Artikel allen helfen kann.

Kapselung von Eingabekomponenten in Vue

Ich war in letzter Zeit etwas beschäftigt, ich habe es schon lange nicht mehr aktualisiert. Heute werden wir eine einfache Vorlage zum Anpassen der Kapselung der Eingabekomponente veröffentlichen. Codefreunde können die erforderlichen Parameter zu ihren tatsächlichen Projekten hinzufügen

UI-Diagramm in meinem Projekt Es ist so

Der Code lautet wie folgt

Vorlageneinstellungen für untergeordnete Komponenten

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

Vorlage für übergeordnete Komponenten

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

Verwandte Empfehlungen:

TextInput-Komponente Detaillierte Einführung

MaterialDesign – Eingabekomponente des WeChat-Applets

Detailliertes Beispiel für die Kapselung des Plug-Ins mit Vue und dessen Veröffentlichung in npm

Das obige ist der detaillierte Inhalt vonTutorial zum Kapseln von Eingabekomponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!