Einführung in die Kapselung von Eingabekomponenten in Vue

In diesem Artikel werden hauptsächlich relevante Informationen zu detaillierten Beispielen für die Kapselung von Eingabekomponenten in Vue vorgestellt. Ich hoffe, dass dieser Artikel allen helfen kann. Freunde in Not können sich auf

Einkapselung von Eingabekomponenten in Vue beziehen >

Ich war in letzter Zeit etwas beschäftigt und konnte mich schon lange nicht mehr ausziehen, daher tut es mir leid, dass es keine Updates gibt. 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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die Kommunikationspraktiken der Vue-Komponenten

Einführung in die Verpackung von Vue2.0 Multi-Tab Komponenten wechseln

Einführung in die Entwicklung von Vue-Drag-and-Drop-Komponenten

Das obige ist der detaillierte Inhalt vonEinführung in die Kapselung von Eingabekomponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!