可復用性和組合就是將組件可復用性的使用和組合這個組件。

可復用性和組合

我們可以新建一個index.html和index.js，在index.html中引入index.js，然后在index.html中寫入代碼：

// 自定義組件名

new Vue({

el: '#main'

});

index.js中寫入代碼：

Vue.component("vue-hesder", {

template: '

Vue課程

'

});

我們會發(fā)現，打開頁面并沒有什么變化，也就是說我們可以將

這個組件放在任意地方，只要index.js這個組件引入了vue.min.js ，那么它就可以引入這個組件。在組件里我們可以寫很多事件，比如我們再建一個js叫v.js，同樣的我們把index.js中的內容復制到v.js在進行修改一下：

Vue.component("vue-v", {

template: '

俠課島 - vue課程內容 vue組件

'

});

然后在index.html中引入v.js，然后我們在代碼中添加組件標簽。同時我們還可以在頁面中添加任何css樣式來對它進行修飾，但是我們不能直接用組件名進行樣式的編寫，我們需要在組件名里面用選擇器然后通過選擇器對它再進行添加才會生效。

// 錯誤示范，這樣不會被認可且不會識別

vue-v{

color:red;

}

我們再定義一個e.js，同樣的操作重復上述步驟，在引用時我們是按順序引用的，因此給我們呈現的效果頁面也是按順序來的。

如果我們想要在其他頁面也同樣使用的話，那么我們可以重新建一個html比如v.html，然后一樣的index.html代碼，去掉index.js和e.js和相對應的組件和代碼：

那么我們得到的頁面就是它所單獨對應的頁面，也是可以的。

vue-v頁面截圖：

vue-e頁面截圖：

整個截圖：

上面代碼截圖示例，說明了這幾個組件我們可以將它重復到任何地方使用，并且可以任意組合，也就是說我們將這些組件進行復用性并統一組合起來。這樣使得我們不用去重復寫過多的項目代碼，大大的壓縮了我們的開發(fā)難度和提高了我們的開發(fā)時長效率。

總結

以上是生活随笔為你收集整理的java 中组合与复用_可复用性和组合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。