vue3 一些非常非常好用的小東西(更新中恨胚。骂因。。)

1. vue3 的 v-model 指定傳入某個(gè)數(shù)據(jù)

例: 父組件是這樣赃泡, myName 和 maAge 是父組件內(nèi)要傳入子組件的數(shù)據(jù)

<h-table v-model:name="myName"  v-model:age="myAge">
</table>

子組件在props中通過(guò) name 寒波、age 就可以接收到父組件傳過(guò)來(lái)的 myName乘盼、myAge
并且通過(guò) update:name 、update:age 就可把值傳回到父組件的 myName俄烁、 myAge
例:

<script>
  setup(props, { emit }) {
    props:['name', 'age']
    const changeName = () => {
      emit('update:name', '張三')
      emit('update:age', 20)
    }
  }
</script> 

非常清爽绸栅! 點(diǎn)贊

2. 組件傳參使用 readonly

在vue和react框架有一條規(guī)范是單向數(shù)據(jù)流,所以我們?cè)谙蛳聜鲄⒌臅r(shí)候页屠,不希望下層組件更改數(shù)據(jù)粹胯,此時(shí)我們?cè)趥鲄r(shí)可以使用readonly,確保傳輸?shù)阶咏M件的數(shù)據(jù)不被更改辰企!

3.自定義指令 directive

對(duì)比vue2來(lái)說(shuō)风纠。

vue2自定義指令聲明周期有5個(gè)(不是很友好,增加學(xué)習(xí)成本)

bind
inserted
update
componentUpdated
unbind

vue3中牢贸,自定義指令生命周期基本依照了vue的生命周期(減少學(xué)習(xí)成本)

created
beforMonunt
mounted
beforUpdate
updated
beforUnmount
Unmounted

注冊(cè)自定義指令vue2與vue3一致

此處 vm 為 vue實(shí)例竹观。

vm.directive('自定義指令名',{生命周期 例:
update: function(el,binding,vnode,oldVnode){}
})

這里需要注意的地方是 vm.directive('自定義指令名稱(chēng)'十减,‘第二個(gè)參數(shù)’)

‘第二個(gè)參數(shù)’ 需要注意

它可以是一個(gè)對(duì)象栈幸,對(duì)象中生命周期是以鍵值對(duì)的形式愤估,根據(jù)需求在對(duì)應(yīng)的生命周期進(jìn)行代碼書(shū)寫(xiě)帮辟。
也可以是一個(gè)函數(shù),當(dāng)它是一個(gè)函數(shù)時(shí)玩焰,會(huì)默認(rèn)被掛載到兩個(gè)生命周期上由驹。
1.在vue2中,會(huì)默認(rèn)掛在 bind 與 update 上
2.在vue3中昔园,會(huì)默認(rèn)掛在 mounted 與 update 上

4.filter 過(guò)濾器

在vue2中可以使用filter 在模板中使用管道符 | 來(lái)使用filter蔓榄。
在vue3中被移除,推薦使用 計(jì)算屬性來(lái)替代 默刚,也減少了學(xué)習(xí)成本甥郑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市荤西,隨后出現(xiàn)的幾起案子澜搅,更是在濱河造成了極大的恐慌,老刑警劉巖邪锌,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件勉躺,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡觅丰,警方通過(guò)查閱死者的電腦和手機(jī)饵溅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)妇萄,“玉大人蜕企,你說(shuō)我怎么就攤上這事咬荷。” “怎么了轻掩?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵萍丐,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我放典,道長(zhǎng)逝变,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任奋构,我火速辦了婚禮壳影,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘弥臼。我一直安慰自己宴咧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布径缅。 她就那樣靜靜地躺著掺栅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪纳猪。 梳的紋絲不亂的頭發(fā)上氧卧,一...
    開(kāi)封第一講書(shū)人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音氏堤,去河邊找鬼沙绝。 笑死,一個(gè)胖子當(dāng)著我的面吹牛鼠锈,可吹牛的內(nèi)容都是我干的闪檬。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼购笆,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼粗悯!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起同欠,我...
    開(kāi)封第一講書(shū)人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤样傍,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后行您,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體铭乾,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年娃循,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了炕檩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖笛质,靈堂內(nèi)的尸體忽然破棺而出泉沾,到底是詐尸還是另有隱情,我是刑警寧澤妇押,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布跷究,位于F島的核電站,受9級(jí)特大地震影響敲霍,放射性物質(zhì)發(fā)生泄漏俊马。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一肩杈、第九天 我趴在偏房一處隱蔽的房頂上張望柴我。 院中可真熱鬧,春花似錦扩然、人聲如沸艘儒。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)界睁。三九已至,卻和暖如春兵拢,著一層夾襖步出監(jiān)牢的瞬間翻斟,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工卵佛, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留杨赤,地道東北人敞斋。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓截汪,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親植捎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子衙解,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354