可複用性和組合

時間 2019-11-26

標籤用性組合简体版

原文原文鏈接

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

可複用性和組合

咱們能夠新建一個index.html和index.js，在index.html中引入index.js，而後在index.html中寫入代碼：html

<body>
    <div id="main">
      // 自定義組件名
      <vue-hesder class="hesder"></vue-hesder>
    </div>
</body>
<script>
    new Vue({
      el: '#main'
    });
</script>

index.js中寫入代碼：vue

Vue.component("vue-hesder", {
  template: '<h1>Vue課程</h1>'
});

咱們會發現，打開頁面並無什麼變化，也就是說咱們能夠將<h1>這個組件放在任意地方，只要index.js這個組件引入了vue.min.js ，那麼它就能夠引入這個組件。在組件裏咱們能夠寫不少事件，好比咱們再建一個js叫v.js，一樣的咱們把index.js中的內容複製到v.js在進行修改一下：3d

Vue.component("vue-v", {
  template: '<h1>俠課島 - vue課程內容 vue組件</h1>'
});

而後在index.html中引入v.js，而後咱們在代碼中添加組件標籤<vue-v>。同時咱們還能夠在頁面中添加任何css樣式來對它進行修飾，可是咱們不能直接用組件名進行樣式的編寫，咱們須要在組件名裏面用選擇器而後經過選擇器對它再進行添加纔會生效。code

// 錯誤示範，這樣不會被承認且不會識別
vue-v{
    color:red;
}

咱們再定義一個e.js，一樣的操做重複上述步驟，在引用時咱們是按順序引用的，所以給咱們呈現的效果頁面也是按順序來的。component

若是咱們想要在其餘頁面也一樣使用的話，那麼咱們能夠從新建一個html好比v.html，而後同樣的index.html代碼，去掉index.js和e.js和相對應的組件和代碼： htm

那麼咱們獲得的頁面就是它所單獨對應的頁面，也是能夠的。blog

vue-v頁面截圖：事件

vue-e頁面截圖：ip

整個截圖：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。