vue components

intro

組件是帶有名稱的可復用實例。
因為組件是可復用的組件實例，所以它們與根實例接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。

組成

1. props： 組件的attributes，可以傳任意類型，任意數量的屬性值，用于組件渲染。

事件通訊

單向數據流通信： 所有的 prop 都使得其父子 prop 之間形成了一個單向下行 綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的 應用的數據流向難以理解。

另外，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了， Vue 會在 瀏覽器的控制臺中發出警告。

這里有兩種常見的試圖變更一個 prop 的情形：

1. 這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下，最好定義一個本地的 data property 并將這個 prop 作為其初始值：

props: ['initialCounter'],
data() {return {counter: this.initialCounter}
}

2. 這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

props: ['size'],
computed: {normalizedSize: function () {return this.size.trim().toLowerCase()}
}

注冊方式

為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過 component 方法全局注冊的：

const app = Vue.createApp({})app.component('my-component-name', {// ... 選項 ...
})

全局注冊的組件可以在應用中的任何組件的模板中使用。