Home > Web Front-end > JS Tutorial > body text

Tutorial on how to encapsulate input components in Vue

小云云
Release: 2018-01-15 14:27:56
Original
3392 people have browsed it

This article mainly introduces relevant information about the detailed examples of encapsulating input components in Vue. I hope this article can help everyone. Friends in need can refer to it. I hope it can help everyone.

Encapsulating the input component in Vue

I've been a little busy lately. I haven't updated it for a long time. Sorry. Today we are going to post a simple template on how to customize the encapsulation of the input component. Code friends can add the required parameters to their actual projects

UI diagram in my project It’s like this

The code is as follows

Template settings for sub-components


<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>
Copy after login

Parent component template


<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>
Copy after login

Related recommendations:

Detailed introduction to the TextInput component

MaterialDesign--input component of WeChat applet

Detailed example of using vue to encapsulate the plug-in and publish it to npm

The above is the detailed content of Tutorial on how to encapsulate input components in Vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template