在項目中,我們經常會用到許多類似的效果,若一直進行復制粘貼,會導致代碼重復性太高,且后期維護代價嚴重,為方便項目的開發和維護,可以根據封裝的思想,將頁面上可重用的部分封裝成自定義組件。
首先在components文件夾下創建一個Vue組件,里面封裝所需要的代碼。


props中設定的是標簽中的屬性,用于父組件向自定義組件中傳值。

注意:自定義組件中根元素只能有一個。
接著在外面創建Vue實例。

Vue中組件的引用原則是先注冊后使用。import導入后,首先要在components中注冊組件并設置組件名,接著我們就可以使用這個自定義組件了。在標簽中,我們可以給剛才在props中設置的vfor屬性傳值。
然后保存,我們發現頁面中已經渲染出vfor-list對象里的值。

上一篇: 什么是es6——解構賦值
下一篇: Vue自定義組件中$emit的用法



