Maison  >  Article  >  interface Web  >  Tutoriel sur la façon d'encapsuler les composants d'entrée dans Vue

Tutoriel sur la façon d'encapsuler les composants d'entrée dans Vue

小云云
小云云original
2018-01-15 14:27:563379parcourir

Cet article présente principalement des informations pertinentes sur les exemples détaillés d'encapsulation de composants d'entrée dans Vue. J'espère que cet article pourra aider tout le monde. Les amis dans le besoin pourront s'y référer.

Encapsuler le composant d'entrée dans Vue

J'ai été un peu occupé ces derniers temps, je ne l'ai pas mis à jour depuis longtemps. 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


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

Modèle de composant parent


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

Composant TextInput Introduction détaillée

MaterialDesign - composant d'entrée de l'applet WeChat

Exemple détaillé d'encapsulation du plug-in avec vue et de sa publication sur npm

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