組件關(guān)系:只要被調(diào)用就是子組件,公共組件:提高代碼復(fù)用.頁面組件:提高代碼可讀性.(方便后期維護)

如何在組件中顯示數(shù)據(jù)： 通過模板語法{{data中的鍵}}

如何在組件中使用事件： 通過事件語法@事件類型="函數(shù)名"

層級思想：只要被調(diào)用的組件 都屬于當前頁面的子組件（站在html結(jié)構(gòu)上有父標簽 子標簽）。

封裝思想：公共組件-增加代碼復(fù)用性，邏輯/頁面組件-增加代碼可讀性。

組件通信:不同父調(diào)用NavBar子組件所顯示的內(nèi)容不一樣，父得傳遞數(shù)據(jù)給子 也就是組件通信

??props(父傳子):是啥：組件內(nèi)部的一個語法???作用：獲取組件屬性值

????????props屬性 =》會自動保存到模型中，然后視圖通過 {{屬性名}} 來獲取顯示數(shù)據(jù)

????????調(diào)用: <組件名 屬性名="值" 或 v-bind:屬性名="data中的鍵"></組件名>

????????定義:app.component(組件名, {?// 核心目的獲取屬性數(shù)據(jù) -> 自動注入到模型中 -> 調(diào)用

???props: [屬性名, ..., 屬性名],或

???props: {屬性名: 類型, // 情況1：單類型 屬性名: [類型,...,類型],??// 情況2：多類型 屬性名: {?// 情況3：對象既可以檢查類型又可以驗證還有默認數(shù)等type: String,required: true,//(必須要傳，不傳報錯)default: 100,validator: function (value) {return bool}}},template: ``,data() {},methods: {},....})

???$emit(子傳父):?通知（發(fā)送通知）：this.$emit("自定義事件名稱", 數(shù)據(jù),....,數(shù)據(jù))

執(zhí)行（監(jiān)控通知）：@自定義事件名稱="父處理函數(shù)"

單項數(shù)據(jù)流:單向數(shù)據(jù)流指在組件化思想，開發(fā)的項目中，數(shù)據(jù)由根或者父組件傳遞給子組件，禁止子組件中直接更改，而是由父更改后重新傳遞給子數(shù)據(jù)使用

組件通信其他方案:定義數(shù)據(jù)，父寫provide: {數(shù)據(jù)名: 值}

使用數(shù)據(jù)子寫（注：可以理解為同步模型 因此可以直接視圖使用）

inject:['數(shù)據(jù)名', ...., '數(shù)據(jù)名']

組件通信:插槽slot:

默認:?步驟1：定義組件 通過<slot></slot>占位留一個口子/槽

步驟2：調(diào)用組件 留心:雙標簽中的內(nèi)容 會自動填充到口子/槽 中

具名:步驟1：定義組件 通過<slot name="標識"></slot>占位留一個口子/槽

步驟2：調(diào)用組件 根據(jù)下述語法插入數(shù)據(jù)（留心1：如果標識不寫則插入默認口子/槽?留心2：標識不能加引號

新：<template #標識>內(nèi)容</template>

作用域:步驟1：定義組件 <slot name="標識" v-bind:任意名稱="data模型中的鍵" ... ></slot>?傳數(shù)據(jù)