Vue中封裝input組件的實(shí)例詳解

更新時間：2017年10月17日 08:34:39 作者：res_min

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

Vue中封裝input組件

最近有點(diǎn)忙不過來脫了很久，沒有更新抱歉。今天要將的時如何自定義封裝input組件，博主知識發(fā)個簡單的模板碼友們可以更具自己的實(shí)際項(xiàng)目添加需要的參數(shù)

我的項(xiàng)目中的UI圖是這樣的

代碼如下

子組件的模板設(shè)置

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

父組件模板

<template>
 <div class="completion-input-box">
  <FromList :text="'創(chuàng)業(yè)項(xiàng)目名稱'" v-model="projectN"></FromList>
  <FromList :text="'所屬公司名稱'" v-model="companyN"></FromList>
  <FromList :text="'所屬投資機(jī)構(gòu)名稱'" v-model="mechanismN"></FromList>
 </div>
</template>
<script>
import FromList from './FromList.vue'
export default {
 name: 'search',
 data() {
  return {
   projectN: '',     // 創(chuàng)業(yè)項(xiàng)目名稱
   companyN: '',     // 所屬公司名稱
   mechanismN: ''    // 所屬機(jī)構(gòu)名稱
  }
 },
 components: {
  FromList
 }
}
</script>

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
本文主要介紹了el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
淺入深出Vue之自動化路由
這篇文章主要介紹了淺入深出Vue之自動化路由，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue computed實(shí)現(xiàn)原理深入講解
computed又被稱作計(jì)算屬性，用于動態(tài)的根據(jù)某個值或某些值的變化，來產(chǎn)生對應(yīng)的變化，computed具有緩存性，當(dāng)無關(guān)值變化時，不會引起computed聲明值的變化。產(chǎn)生一個新的變量并掛載到vue實(shí)例上去
2022-10-10
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue使用預(yù)渲染代替SSR的方法
這篇文章主要介紹了Vue使用預(yù)渲染代替SSR的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
探討Vue.js的組件和模板
指令是Vue.js中一個重要的特性，主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧
2017-10-10
vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue中v-model對select的綁定操作
這篇文章主要介紹了vue中v-model對select的綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能
這篇文章主要介紹了vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12