Tutorial on how to encapsulate input components in Vue

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>

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>

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!