元件

我認為元件是vue強大的地方之一

官方文件：元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹：

在 Vue 中，元件本質上是一個具有預定義選項的例項。
元件可以擴充套件 HTML 元素，封裝可重用的程式碼。
使用元件系統，可以讓前端工程變成模組化開發。就像上面的圖一樣，整個頁面可以由多個元件拼裝而成。

簡單註冊元件:

<div id="app">
  <kiddy></kiddy>
</div>

<script>

    const app = Vue.createApp({});

    //註冊元件
   app.component('kiddy',{
      template: '<h1>你好啊</h1>'
    })

    app.mount('#app');
</script>
 

用component註冊元件。其中的兩個引數：

• 第一個引數為元件名，如'kiddy'，也就是對映到自定義標籤的名字。
• 第二個引數為template，也就是模板。將自定義標籤的內容替換為模板中的內容。

元件的複用

元件是可以執行任意多次的：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
 

全域性元件與區域性元件

使用app.component註冊的元件，即跟上面的例子一樣

const app = Vue.createApp({});

  //註冊元件
 app.component('kiddy',{
    template: '<h1>你好啊</h1>'
  })

 app.mount('#app');

而區域性元件則是通過一個普通的 JavaScript 物件來定義元件

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}
 

當需要使用到這些元件時，再去例項中註冊

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

使用區域性元件的好處:

按照官方文件的說法:全域性註冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構建系統，全域性註冊所有的元件意味著即便你已經不再使用其中一個元件了，它仍然會被包含在最終的構建結果中。這造成了使用者下載的 JavaScript 的無謂的增加。

prop

首先了解元件的作用域是孤立的。但是往往很多時候需要將資料從父元件傳遞給子元件。這時候就需要用到props

props:是可以在元件上註冊的一些自定義 attribute，是子元件訪問父元件資料的唯一介面。

用法：

插槽基礎

作用：在構建頁面過程中一般會把用的比較多的公共的部分抽取出來作為一個單獨的元件，但是在實際使用這個元件的時候卻又不能完全的滿足需求，我希望在這個元件中新增一點東西，這時候我們就需要用到插槽來分發內容。 （對元件定製化處理）

用法：

如圖所示：插槽即為<slot></slot>,當用插槽渲染DOM時會將<slot></slot>替換為Add todo。從而達到對元件定製化處理的作用。

具名插槽

在一個元件裡有時候可能需要使用多個插槽

這時候可以給插槽新增name屬性以至於達到區分的效果，就是給插槽取個名字。
子元件：

<template>
    <div>
        <div class="header">
            <h1>我是頁頭標題</h1>
            <div>
                <slot name="header"></slot>
            </div>
        </div>
        <div class="footer">
            <h1>我是頁尾標題</h1>
            <div>
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "child1"
    }
</script>
 
<style scoped>
 
</style>

父元件向具名插槽提供內容的時候，我們可以在一個<template> 元素上使用 v-slot指令，並以 v-slot 的引數的形式提供其名稱：

<template>
<div>
    <div>slot內容分發</div>
    <child1>
        <template slot="header">
            <p>我是頁頭的具體內容</p>
        </template>
        <template slot="footer">
            <p>我是頁尾的具體內容</p>
        </template>
    </child1>
</div>
</template>
 
<script>
    import child1 from "./child1.vue";
 
    export default {
        name: "father1",
        components: {
            child1
        }
    }
</script>
 
<style scoped>
 
</style>