Vue中封裝input組件的實例詳解
更新時間：2017年10月17日 08:34:39 作者：res_min
這篇文章主要介紹了Vue中封裝input組件的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
Vue中封裝input組件
最近有點忙不過來 脫了很久，沒有更新 抱歉。今天要將的時如何自定義封裝input組件 ，博主知識發(fā)個簡單的模板 碼友們可以更具自己的實際項目添加需要的參數(shù)
我的項目中的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è)項目名稱'" 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è)項目名稱
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之自動化路由，文中通過示例代碼介紹的非常詳細(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
computed又被稱作計算屬性，用于動態(tài)的根據(jù)某個值或某些值的變化，來產(chǎn)生對應(yīng)的變化，computed具有緩存性，當(dāng)無關(guān)值變化時，不會引起computed聲明值的變化。產(chǎn)生一個新的變量并掛載到vue實例上去2022-10-10
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了Vue使用預(yù)渲染代替SSR的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
指令是Vue.js中一個重要的特性， 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧2017-10-10
vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue中v-model對select的綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue實現(xiàn)右鍵點擊彈框信息功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12