东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
07
2023/04

Vue如何使用自定義組件

發(fā)布時間:2023-04-07 16:47:55
發(fā)布者:MaiMai
瀏覽量:
0

    在項目中,我們經(jīng)常會用到許多類似的效果,若一直進行復(fù)制粘貼,會導(dǎo)致代碼重復(fù)性太高,且后期維護代價嚴(yán)重,為方便項目的開發(fā)和維護,可以根據(jù)封裝的思想,將頁面上可重用的部分封裝成自定義組件。


    首先在components文件夾下創(chuàng)建一個Vue組件,里面封裝所需要的代碼。

d8e5059afcfc27e3847d9855dfa8f01.png

694be462b442c069ba8e333c8f4454b.png

    props中設(shè)定的是標(biāo)簽中的屬性,用于父組件向自定義組件中傳值。

26a9195612fb5f557ccf01ebcfbc0b3.png

    注意:自定義組件中根元素只能有一個。


    接著在外面創(chuàng)建Vue實例。

2c0ab730941f0362fdb8ae8987fa710.png

   

    Vue中組件的引用原則是先注冊后使用。import導(dǎo)入后,首先要在components中注冊組件并設(shè)置組件名,接著我們就可以使用這個自定義組件了。在標(biāo)簽中,我們可以給剛才在props中設(shè)置的vfor屬性傳值。


    然后保存,我們發(fā)現(xiàn)頁面中已經(jīng)渲染出vfor-list對象里的值。

789b2952843cbf7b84c91725b5e3538.png

關(guān)鍵詞:
返回列表