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í)成本甥郑。