Maison >interface Web >js tutoriel >Introduction à l'encapsulation des composants d'entrée dans Vue

Introduction à l'encapsulation des composants d'entrée dans Vue

不言
不言original
2018-06-30 17:30:121613parcourir

Cet article présente principalement des informations pertinentes sur les exemples détaillés d'encapsulation de composants d'entrée dans Vue

J'ai été un peu occupé ces derniers temps et je n'ai pas pu me déshabiller depuis longtemps, donc désolé pour le manque de mises à jour. Aujourd'hui, nous allons publier un modèle simple sur la façon de personnaliser l'encapsulation du composant d'entrée. Les amis codeurs peuvent ajouter les paramètres requis à leurs projets réels

Diagramme d'interface utilisateur dans mon projet C'est comme ça



Le code est le suivant

Paramètres du modèle pour les composants enfants


Modèle de composant parent
<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>

Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas être utile à tout le monde. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !
<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>

Recommandations associées :

Introduction aux pratiques de communication des composants Vue

Introduction au packaging de Vue2.0 multi-Tab commutation de composants

Introduction au développement de composants glisser-déposer Vue


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn