搜尋
首頁web前端js教程Vue中封裝input元件方法教學課程
Vue中封裝input元件方法教學課程Jan 15, 2018 pm 02:27 PM
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(&#39;input&#39;, $event.target.value)"
  >
 </p>
</template>
<script>
export default {
 name: &#39;inputlsit&#39;,
 props: [&#39;text&#39;, &#39;value&#39;],
}
</script>

父元件範本

<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>

相關推薦:

TextInput元件的詳細介紹

微信小程式之MaterialDesign--input元件#############實例詳解用vue封裝外掛程式並發佈到npm#######

以上是Vue中封裝input元件方法教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
3分钟快速使用ChatGPT教程,用它帮我写简历,太牛了3分钟快速使用ChatGPT教程,用它帮我写简历,太牛了Apr 11, 2023 pm 07:40 PM

已经火了很久了,身边的同事也用它来进行一些调研,资源检索,工作汇报等方面都有很大的的效率提升。很多人问ChatGPT会不会取代程序员?我的回答是:不会!ChatGPT并不是我们的敌人,相反的是,它是我们的好帮手。未来人和人的竞争,可能就会从原先的我懂得更多,我实操经验更丰富,变成了我比你更会用工具,我比你更懂得提问,我比你更会发挥机器人的最大特性,所以,为了不掉队,你还不准备体验下ChatGPT吗?快速体验面试官经常会问你的项目有啥重难点?很多人不会回答,直接看看ChatGPT怎么说,真的太牛了

laravel input隐藏域怎么实现laravel input隐藏域怎么实现Dec 12, 2022 am 10:07 AM

laravel input隐藏域的实现方法:1、找到并打开Blade模板文件;2、在Blade模板中使用method_field方法来创建隐藏域,其创建语法是“{{ method_field('DELETE') }}”。

vue3怎么封装input组件和统一表单数据vue3怎么封装input组件和统一表单数据May 12, 2023 pm 03:58 PM

准备工作用vuecreateexample创建项目,参数大概如下:用原生input原生的input,主要是value和change,数据在change的时候需要同步。App.tsx如下:import{ref}from&#39;vue&#39;;exportdefault{setup(){//username就是数据constusername=ref(&#39;张三&#39;);//输入框变化的时候,同步数据constonInput=;return()=>({

PHP基础教程:从入门到精通PHP基础教程:从入门到精通Jun 18, 2023 am 09:43 AM

PHP是一种广泛使用的开源服务器端脚本语言,它可以处理Web开发中所有的任务。PHP在网页开发中的应用广泛,尤其是在动态数据处理上表现优异,因此被众多开发者喜爱和使用。在本篇文章中,我们将一步步地讲解PHP基础知识,帮助初学者从入门到精通。一、基本语法PHP是一种解释性语言,其代码类似于HTML、CSS和JavaScript。每个PHP语句都以分号;结束,注

2023年最流行的5个php开发框架视频教程推荐2023年最流行的5个php开发框架视频教程推荐May 08, 2017 pm 04:26 PM

如果想快速进行php web开发,选择一个好用的php开发框架至关重要,一个好的php开发框架可以让开发工作变得更加快捷、安全和有效。那2023年最流行的php开发框架有哪些呢?这些php开发框架排名如何?

老电脑系统xp升级win7教程步骤老电脑系统xp升级win7教程步骤Jul 07, 2023 pm 10:21 PM

xp系统曾经是使用最多的系统,不过随着硬件的不断升级,xp系统已经不能发挥硬件的性能,所以很多朋友就想升级win7系统,下面就和大家分享一下老电脑升级win7系统的方法吧。1、在小白一键重装系统官网中下载小白三步装机版软件并打开,软件会自动帮助我们匹配合适的系统,然后点击立即重装。2、接下来软件就会帮助我们直接下载系统镜像,只需要耐心等候即可。3、下载完成后软件会帮助我们直接进行在线重装Windows系统,请根据提示操作。4、安装完成后会提示我们重启,选择立即重启。5、重启后在PE菜单中选择Xi

教你学会win10如何删除temp文件夹教你学会win10如何删除temp文件夹Jul 08, 2023 pm 04:13 PM

在win10的系统盘中,很多网友会看到一个temp文件夹,里面占用的内存非常大,占用了c盘很多空间。有网友想删除temp文件夹,但是不知道能不能删,win10如何删除temp文件夹。下面小编就教下大家win10删除temp文件夹的方法。首先,Temp是指系统临时文件夹。而很多收藏夹,浏览网页的临时文件都放在这里,这是根据你操作的过程临时保存下来的。如有需要,可以手动删除的。如何删除temp文件夹?具体步骤如下:方法一:1、按下【Win+R】组合键打开运行,在运行框中输入temp,点击确定;2、此

禁用win10更新的步骤教程禁用win10更新的步骤教程Jul 08, 2023 pm 03:21 PM

win10系统会经常推送系统自动更新,有时候正在忙的却突然弹出系统更新,非常不友好。那么如何关闭win10系统自动更新呢?下面,就随小编看看具体操作方法帮你禁用win10更新,大家快来看看是如何操作的吧。1、打开电脑的左下角,找到下方的设置点击进入,操作图片如下2、在windows设置,找到更新和安全点击进入,操作如下。3、点击windows更新,找到高级选项点击进入,操作如下。4、进入windows更新系统的高级选项,关闭更新配置就可以了,如图所示。以上就是禁用win10更新的步骤教程啦,希望

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版