Day014-Component組件

第 12 屆 iThome 鐵人賽

DAY 14

自我挑戰組

與Vue相遇系列第 14 篇

12th鐵人賽 vue.js vue vue學習筆記 vuejs

EdwardXiong

2020-09-28 23:36:30

977 瀏覽

Vue：隨著你使用vue的狀況，你更應該要了解元件模組化的概念。vue不但在資料上面有所規劃，他在元件模組化也有所強大，讓你可以輕鬆地管理好你的元件。在進行案例前，我們首先知道一下，什麼是全域註冊及局部註冊？

全域註冊：
通常，如果需要共用元件，我們會使用全域註冊。在全域註冊中，我們會使用Vue.component()的語法，並且會使用兩個參數，分別是組件名稱及元件內容，元件內容我們利用物件包住，如下：

<script>
    Vue.component("global", {
        template: `<div>{{data}}</div>`,
        data() {
            return {
              data: '哈囉Edward，我是全域註冊，很高興你能夠了解全域註冊'
            }
        }
    });
    let vm = new Vue({
        el: "#app"
    });
</script>

此次的組件名稱，我們命名為global，並且我們在其中給予了data資料。這個資料也是專門給予這個組件。完成後，我們只需要在template為#app下，放置這個組件：

<body>
    <div id="app">
        <global></global>
    </div>
</body>

局部註冊
一般來說，我們大多會使用局部註冊。在判斷是否要用全域或局部時，只需判斷是否網頁載入時，都需要用到！如果不需要，則利用局部註冊，可以達到同等效果，在網頁運行上，也不會耗費太多不需要的組件上：

<script>
    let vm = new Vue({
        el: "#app",
        components: {
            'part': {
                template: `<div>{{data}}</div>`,
                data() {
                    return {
                    data: '哈囉Edward，我是局部註冊，很高興你能夠了解局部註冊'
                    }
                }
            }
        }
    });
</script>

Vue：看是不是很簡單，只需增加component屬性，即可使用。如果沒有問題，之後就開始帶實際例子，並且讓你了解組件之間的傳遞訊息吧~

待續......