Vue元件間的通信方式

props配置項（子元件 ===> 父元件 或 父元件 ===> 子元件）

如果是子向父傳，需要父元件給子元件一個函數，子将資料放入函數的回調中，在通過props傳值

1. 功能：讓元件接收外部傳過來的資料
2. 傳遞資料：

   <Demo name="xxx"/>

3. 接收資料：
   1. 第一種方式（隻接收）：

      props:['name']

   2. 第二種方式（限制類型）：

      props:{name:String}

   3. 第三種方式（限制類型、限制必要性、指定預設值）：

      props:{
          name:{
          type:String, //類型
          required:true, //必要性
          default:'張三' //預設值
          }
      }
                 

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

元件的自定義事件

1. 一種元件間通信的方式，适用于：子元件 ===> 父元件
2. 使用場景：A是父元件，B是子元件，B想給A傳資料，那麼就要在A中給B綁定自定義事件（事件的回調在A中）。
3. 綁定自定義事件：
   1. 第一種方式，在父元件中：

      <Demo @bhz="test"/>

      或

      <Demo v-on:bhz="test"/>

   2. 第二種方式，在父元件中：

      <Demo ref="demo"/>
      ......
      mounted(){
         this.$refs.xxx.$on('bhz',this.test)
      }
                 

   3. 若想讓自定義事件隻能觸發一次，可以使用

      once

      修飾符，或

      $once

      方法。
4. 觸發自定義事件：

   this.$emit('bhz',資料)

5. 解綁自定義事件

   this.$off('bhz')

6. 元件上也可以綁定原生DOM事件，需要使用

   native

   修飾符。
7. 注意：通過

   this.$refs.xxx.$on('bhz',回調)

   綁定自定義事件時，回調要麼配置在methods中，要麼用箭頭函數，否則this指向會出問題！

插槽（<slot>）

1. 作用：讓父元件可以向子元件指定位置插入html結構，也是一種元件間通信的方式，适用于 父元件 ===> 子元件 。
2. 分類：預設插槽、具名插槽、作用域插槽
3. 使用方式：
   1. 預設插槽：

      父元件中：
              <Category>
                 <div>html結構1</div>
              </Category>
      子元件中：
              <template>
                  <div>
                     <!-- 定義插槽 -->
                     <slot>插槽預設内容...</slot>
                  </div>
              </template>
                 

   2. 具名插槽：

      父元件中：
              <Category>
                  <template slot="center">
                    <div>html結構1</div>
                  </template>
      ​
                  <template v-slot:footer>
                     <div>html結構2</div>
                  </template>
              </Category>
      子元件中：
              <template>
                  <div>
                     <!-- 定義插槽 -->
                     <slot name="center">插槽預設内容...</slot>
                     <slot name="footer">插槽預設内容...</slot>
                  </div>
              </template>
                 

   3. 作用域插槽：資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。（games資料在Category元件中，但使用資料所周遊出來的結構由App元件決定）

全局事件總線（GlobalEventBus）

1. 一種元件間通信的方式，适用于任意元件間通信。
2. 安裝全局事件總線：

   new Vue({
       ......
       beforeCreate() {
           Vue.prototype.$bus = this //安裝全局事件總線，$bus就是目前應用的vm
       },
       ......
   }) 
              

3. 使用事件總線：
   1. 接收資料：A元件想接收資料，則在A元件中給$bus綁定自定義事件，事件的回調留在A元件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
                 

   2. 提供資料：

      this.$bus.$emit('xxxx',資料)

4. 最好在beforeDestroy鈎子中，用$off去解綁目前元件所用到的事件。

消息訂閱與釋出（pubsub）

1. 一種元件間通信的方式，适用于任意元件間通信。
2. 使用步驟：
   1. 安裝pubsub：

      npm i pubsub-js

   2. 引入:

      import pubsub from 'pubsub-js'

   3. 接收資料：A元件想接收資料，則在A元件中訂閱消息，訂閱的回調留在A元件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息
      }
                 

   4. 提供資料：

      pubsub.publish('xxx',資料)

   5. 最好在beforeDestroy鈎子中，用

      PubSub.unsubscribe(pid)

      去取消訂閱。

Vuex

1.概念

在Vue中實作集中式狀态（資料）管理的一個Vue插件，對vue應用中多個元件的共享狀态進行集中式的管理（讀/寫），也是一種元件間通信的方式，且适用于任意元件間通信。

2.何時使用？

多個元件需要共享資料時

3.搭建vuex環境

4.基本使用

1. 初始化資料、配置

   actions

   、配置

   mutations

   ，操作檔案

   store.js

2. 元件中讀取vuex中的資料：

   $store.state.sum

3. 元件中修改vuex中的資料：

   $store.dispatch('action中的方法名',資料)

   或

   $store.commit('mutations中的方法名',資料)

   備注：若沒有網絡請求或其他業務邏輯，元件中也可以越過actions，即不寫

   dispatch

   ，直接編寫

   commit

5.getters的使用

1. 概念：當state中的資料需要經過加工後再使用時，可以使用getters加工。
2. 在

   store.js

   中追加

   getters

   配置
3. 元件中讀取資料：

   $store.getters.bigSum