1、props

功能：讓元件接收外部傳過來的資料，可用於父子元件之間的通訊

備註：props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的資料。

 1 //簡單宣告接收
 2         // props:['name','age','sex'] 
 3 
 4         //接收的同時對資料進行型別限制
 5         /* props:{
 6             name:String,
 7             age:Number,
 8             sex:String
 
 9         } */
10 
11         //接收的同時對資料：進行型別限制+預設值的指定+必要性的限制
12         props:{
13             name:{
14                 type:String, //name的型別是字串
15                 required:true, //name是必要的
16             },
17             age:{
18                 type:Number,
19                 default:99 //預設值
20             },
 
21             sex:{
22                 type:String,
23                 required:true
24             }
25         }
26     }

2、元件的自定義事件

1. 一種元件間通訊的方式，適用於：子元件 ===> 父元件

2. 使用場景：A是父元件，B是子元件，B想給A傳資料，那麼就要在A中給B繫結自定義事件（事件的回撥在A中）。

3、插槽（3種）

讓父元件可以向子元件指定位置插入html結構，也是一種元件間通訊的方式，適用於 父元件 ===> 子元件。

3.1預設插槽

 1 父元件中：
 2         <Category>
 3            <div>html結構1</div>
 4         </Category>
 5 子元件中：
 6         <template>
 7             <div>
 8                <!-- 定義插槽 -->
 9                <slot>插槽預設內容...</slot>
10             </div>
11         </template>

3.2具名插槽

 1 父元件中：
 2         <Category>
 3             <template slot="center">
 4               <div>html結構1</div>
 5             </template>
 6 
 7             <template v-slot:footer>
 8                <div>html結構2</div>
 9             </template>
10         </Category>
11 子元件中：
12         <template>
13             <div>
14                <!-- 定義插槽 -->
15                <slot name="center">插槽預設內容...</slot>
16                <slot name="footer">插槽預設內容...</slot>
17             </div>
18         </template>

3.3作用域插槽

理解：資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。（games資料在Category元件中，但使用資料所遍歷出來的結構由App元件決定

 1 父元件中：
 2         <Category>
 3             <template scope="scopeData">
 4                 <!-- 生成的是ul列表 -->
 5                 <ul>
 6                     <li v-for="g in scopeData.games" :key="g">{{g}}</li>
 7                 </ul>
 8             </template>
 9         </Category>
10 
11         <Category>
12             <template slot-scope="scopeData">
13                 <!-- 生成的是h4標題 -->
14                 <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
15             </template>
16         </Category>
17 子元件中：
18         <template>
19             <div>
20                 <slot :games="games"></slot>
21             </div>
22         </template>
23         
24         <script>
25             export default {
26                 name:'Category',
27                 props:['title'],
28                 //資料在子元件自身
29                 data() {
30                     return {
31                         games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
32                     }
33                 },
34             }
35         </script>

4、全域性事件匯流排

一種元件間通訊的方式，適用於任意元件間通訊。

安裝全域性事件匯流排：

1 new Vue({
2     ......
3     beforeCreate() {
4         Vue.prototype.$bus = this //安裝全域性事件匯流排，$bus就是當前應用的vm
5     },
6     ......
7 }) 

使用事件匯流排：

 1 //接收資料：A元件想接收資料，則在A元件中給$bus繫結自定義事件，事件的回撥留在A元件自身。
 2 methods(){
 3   demo(data){......}
 4 }
 5 ......
 6 mounted() {
 7   this.$bus.$on('xxxx',this.demo)
 8 }
 9 //提供資料：
10 this.$bus.$emit('xxxx',資料)

優化：最好在beforeDestroy鉤子中，用$off去解綁當前元件所用到的事件。

5、訊息訂閱與釋出（不用）

6、Vuex（vue開發必用）

使用場景：多個元件需要共享資料時

在Vue中實現集中式狀態（資料）管理的一個Vue外掛，對vue應用中多個元件的共享狀態進行集中式的管理（讀/寫），也是一種元件間通訊的方式，且適用於任意元件間通訊。