元件優化的兩三事(二) input塊元件優化

2021-09-24 13:22:53 字數 831 閱讀 5499

元件優化的兩三事(二):input塊元件優化

最近在寫乙個動態表單的元件,可見文章vue: 動態表單實現(單問題線)

在寫該元件時,我在開始所想實現的的是每個元件達到最小塊,再將塊組合到表單中。但在實現時,若我把input封裝成乙個元件,頁面實現是沒有問題的,但在該元件的答案獲取確實乙個極大的問題。

關於子元件向父元件傳值,我們最通常用的也是最先想到的就是使用$emit,但這首先有個前提是子元件有個互動事件來觸發,後父元件有個地方可以存值。

我最初想到的的方法:

首先我們說的input元件是有乙個至多個input組成。

我們將元件中的每個input加上change或blur事件,當出發事件時,要獲取整個元件的所有input值,傳遞給父元件,父元件拿什麼變數來存呢?就是要父元件通過prop提前告訴子元件該變數名,子元件在告訴父元件時,就需要把變數名在告訴會回給父元件

這是乙個比較麻煩的流程,vue有乙個方法可以稍微簡化一點,就是使用v-model:

關於該方法,其實在vue教程文件中已明細講述:自定義元件的-v-model

下面是我的個人理解與使用:

父元件:

說明:父元件在使用子元件時,使用v-model繫結乙個存在父元件item.ans上子元件的value,和乙個input事件,這個input事件可以是change,是屬於父元件的事件,子元件通過$emit呼叫該事件,父元件的change事件,會自動把value的值賦上去。

子元件:

// 給input加上事件

大概就是上述這樣了,若上述理解或**有問題,也請多多指教

元件優化的兩三事(一) 動態註冊元件

最近在研究元件,現研究心得是元件最基本的優化是使它可以做到可延展性。關於可延展性,我認為就是當乙個元件已經做好,後期可以可以不斷加功能,加功能的前提使不會影響前期功能,並且希望加功能所涉及的到問檔案盡可能的少,最好做到我們只需要加上乙個新的檔案用來實現新功能,其他不做改動。所以說,若要做到上述的要求...

文案學習兩三事

一 追熱點的三個原則 三觀正 不能盲目追逐熱點話題 速度快 6小時內 關聯度強 話題和產品 表述簡單 利於記憶 二 追熱點步驟 每天檢視搜搜熱點和微博大號,找關聯,做創意 三 互動的套路 先問兩 三個具體問題,找到對方的興趣點 出題和遊戲,icebreaker games 破冰遊戲 拉近陌生人之間的...

關於讀書兩三事

今天說說怎麼閱讀吧,對於讀書這件事情,大家都是贊同的,當你是小孩子的時候後,只要你看書,父母就很高興,不會打攪你,當你在學校時,也是一樣,只要你在讀書,老師就會誇你,但是當你長大後,畢業了,工作了,你卻還是和小時候一樣的思維,認為只要拿起一本書,就認為自己在努力,自己感動自己,就不會再焦慮了,有時候...