Introduction to encapsulating 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

Encapsulating input components in Vue

I've been a little busy lately and took it off for a long time, so sorry for the lack of updates. 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>

The above is the entire content of this article, I hope it will be helpful to everyone’s study, For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to Vue component communication practice

##Introduction to the encapsulation of Vue2.0 multi-Tab switching components

Introduction to the development of Vue drag and drop components

##

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