[Day15] 元件概念

第 12 屆 iThome 鐵人賽

DAY 15

Modern Web

少年學Vue，如隙中窺月系列第 15 篇

12th鐵人賽

Leo

2020-09-29 23:12:04

799 瀏覽

分享至

我們今天在 Vue 應用中宣告一個資料 counter，並且設定一個按鈕綁定點擊事件，此時當我們點擊按鈕時，會發現按鈕上的 counter 變數值加一，我們將相同按鈕程式碼複製再產生一個相同的按鈕。此點會發現當我們點擊按鈕時，兩顆按鈕的資料都會加一，如果我們要將按鈕的資料分開，可能的做法是將不同的按鈕綁定不同的變數，但這樣就變成我們要多設定一個變數，如果此時按鈕一多，那麼要設定新的變數也會變多。此時我們可以使用 Vue 元件的做法來解決這個問題。透過元件，我們可以將程式給模組化重複利用。接下來說明元件的使用方式，首先我們必須再 Vue 應用程式前面宣告一個 Vue.component ，() 內第一個參數我們放的是元件的名稱，像是範例程式將元件名稱設定成 'counter' ，接下來第二個參數就很像是我們宣告一個 Vue app 的樣子，裡面是一個物件形式，也有 data 資料不過和一般 Vue 應用宣告的方式不太一樣，我們必須以物件的形式透過 function return 來傳遞資料，像是範例程式我們將資料 counter 包裝物件透過函數來回傳。接下來我們使用 template 的方式來宣告元件，有很多可以產生元件的方法，這邊我們先用 template 為例子，template 裡面我們必須以字串的方式來放入我們想在畫面呈現的程式碼，就很像是 js 的 innerHTML ，然後這邊我們使用一個 js ES6 模版字符串的語法，將我們要呈現在畫面上的 html 程式語法直接打在模版字符串裡面，透過此方法我們可以省略串接字串的加號，更容易撰寫程式，因此我們複製上一個按鈕得程式碼將它放進中，最後我們透過元件<counter></counter>來產生兩格按鈕，當我們點擊兩顆按鈕時，可以明顯發現按鈕內的資料不會都加一，達到了資料的獨立。透過 Vue 開發者工具，我們也可以看到再在root 元件裡面有兩個 counter 元件，點進去 counter 元件發現他們的資料確實都是獨立的。

<body>
    <div id='app'>
        一般寫法:
        <button @click="counter+=1">{{counter}}</button>
        <button @click="counter+=1">{{counter}}</button>
        元件寫法：
        <counter></counter>
        <counter></counter>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('counter',{
        data:function(){
            return{
                counter: 0
            } 
        },
        template:`
        <button @click="counter+=1">{{counter}}</button>
        `
    });
    var app = new Vue({
        el: '#app',
        data:{
            counter: 0
        }
    })
</script>