Vue Component介紹

Vue
,

:::tip 什麼是component?
元件(component)是一段獨立的程式碼，代表網頁的一部份。元件有自己的資料與Javascript，通常也帶有自己的樣式。可以包含其他的元件，也能彼此進行溝通。元件可以是按鈕或是圖示，也可以是能在整個網站或網頁中重複使用的表單這種大元素。
:::

元件基礎

撰寫一個間單的元件

1
2
3
const SimpleButton = {
    template: <button>Simple button</button>
}

接下來可以透過 components物件將這個元件傳進app中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <simple-button></simple-button>
</div>
<script>
    const SimpleButton = {
        template: '<button>Simple Button</button>'
    };
    new Vue({
        el: '#app',
        components: {
            SimpleButton
        }
    });
</script>

也可以透過全域的方式註冊元件

1
2
3
Vue.component('simple-button', {
    template: 'button>Simple Button</button>'
})