提姆寫程式

0%

Vue 筆記 - Component 元件化基礎概念

發表於 更新於 分類於 Disqus：
如何製作獨立元件

vue.js

在網頁中會重複出現一些相同的元素或介面，若可以將此介面獨立出來並反覆使用，就可以大大減少開發的時間與重工，透過元件化的方式將這些重複或是制式的介面獨立出來，在不同的頁面只要做引入就可以使用，是非常方便的事情。

下方有一個按鈕，若這個按鈕點擊一次，就會使其中的數字 +1，

HTML

1
2
3
4
5
6
7
8
9
<div id="app">
  <div>
    你已經點擊
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">
      {{ counter }}
    </button>
    下。
  </div>
</div>

Vue

1
2
3
4
5
6
var app = new Vue({
  el: "#app",
  data: {
    counter: 0,
  },
});

假設要將此元件獨立化可以這樣做：

先在 vue 的物件上方加入這行元件的名稱與內容，向下方起手式。

1
2
3
4
5
6
7
8
9
10
Vue.component('對應的 html 標籤名稱',{
data() {
  return {
    ...
  }
},
})
var app = new Vue({
...
})

因為要複製同一個按鈕的功能，故把名稱自定義為 counter-component，並使用逗點隔開，後方接著一個物件，而這個物件裡面會有一個 data 的函式，跟 vue 初始下方的資料為物件形式不同，再把該功能帶入 data 函式中。

因為要在網頁上重複使用元件，當然不能少了標籤內容，在 data 下方再給予一個 template 屬性，並用重音符 ‵，也就是 ES6 語法外面的反引號，建立 HTML 標籤。

1
2
3
4
5
6
7
8
9
10
11
12
Vue.component("counter-component", {
  data() {
    return {
      counter: 0,
    };
  },
  template: `
            <div>
              你已經點擊 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
            </div>
            `,
});

最後在把自定義的標籤放在 html 中，就完成了。

1
<counter-component></counter-component>

此建立好的元件可以重複使用，所以在 html 多建立幾個標籤，也不會互相影響，資料都是獨立的!