Vue中封裝input組件的介紹

這篇文章主要介紹了Vue中封裝input元件的實例詳解的相關資料,希望透過本文能幫助到大家，需要的朋友可以參考下

Vue中封裝input元件

最近有點忙不過來脫了很久，沒有更新抱歉。今天要將的時如何自訂封裝input元件，博主知識發個簡單的模板碼友們可以更具自己的實際項目添加需要的參數

我的項目中的UI圖是這樣的

#程式碼如下

#子元件的範本設定

##子元件的範本設定

<template>
 <p class="completion-input-box">
  <span class="input-box-name">{{text}}</span>
  <input 
  type="text" 
  ref="input"
  :value="value"  
  @input="$emit('input', $event.target.value)"
  >
 </p>
</template>
<script>
export default {
 name: 'inputlsit',
 props: ['text', 'value'],
}
</script>

父元件範本

<template>
 <p class="completion-input-box">
  <FromList :text="'创业项目名称'" v-model="projectN"></FromList>
  <FromList :text="'所属公司名称'" v-model="companyN"></FromList>
  <FromList :text="'所属投资机构名称'" v-model="mechanismN"></FromList>
 </p>
</template>
<script>
import FromList from './FromList.vue'
export default {
 name: 'search',
 data() {
  return {
   projectN: '',     // 创业项目名称
   companyN: '',     // 所属公司名称
   mechanismN: ''    // 所属机构名称
  }
 },
 components: {
  FromList
 }
}
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

Vue元件通訊實務的介紹

#Vue2.0 多Tab切換元件的封裝介紹

關於Vue拖曳元件的開發介紹

##################

以上是Vue中封裝input組件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！