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

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

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

Vue中封裝input組件

最近有點(diǎn)忙不過來脫了很久，沒有更新抱歉。今天要將的時(shí)如何自定義封裝input組件，博主知識發(fā)個(gè)簡單的模板碼友們可以更具自己的實(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)文章

vue3 文檔梳理快速入門
vue3之所以受廣大袁友的喜歡，優(yōu)點(diǎn)必不可少呀，比如：可以監(jiān)聽動態(tài)新增的屬性；可以監(jiān)聽刪除的屬性；可以監(jiān)聽數(shù)組的索引和 length 屬性；下面文章小編就來向大家介紹vue3，感興趣的小伙伴不要錯(cuò)過奧
2021-09-09
web前端vue實(shí)現(xiàn)插值文本和輸出原始html
這篇文章主要介紹了web前端vue實(shí)現(xiàn)插值文本和輸出原始html，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
vue.js 微信支付前端代碼分享
下面小編就為大家分享一篇vue.js 微信支付前端代碼。具有很好的參考價(jià)值。希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue腳手架搭建項(xiàng)目的兼容性配置詳解
這篇文章主要介紹了vue腳手架搭建項(xiàng)目的兼容性配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
一文帶你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一項(xiàng)強(qiáng)大功能,它改進(jìn)了代碼組織和重用,使得構(gòu)建組件更加靈活和可維護(hù),本文我們將深入探討 Composition API 的各個(gè)方面,希望對大家有所幫助
2023-10-10
Vue實(shí)例的對象參數(shù)options的幾個(gè)常用選項(xiàng)詳解
今天小編就為大家分享一篇Vue實(shí)例的對象參數(shù)options的幾個(gè)常用選項(xiàng)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
詳解Vue中watch的詳細(xì)用法
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-11-11
VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-08-08
解決vue項(xiàng)目路徑不正確,自動跳轉(zhuǎn)404的問題
這篇文章主要介紹了解決vue項(xiàng)目路徑不正確,自動跳轉(zhuǎn)404的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10