Vue組件間的資料通信

props配置項

• 功能：讓組件接受外部傳來的資料

  • 傳遞資料：

    <Demo name="xxx"></Demo>
    

  • 接受資料：
    • 只接受

      props: ["name"],
      

    • 限制型別接受

      props: {
        name: String,
      },
      

    • 限制型別，必要性限制，指定默認值接受

      props: {
        name: {
          type: String,
          required: true,
          default: "胡先森"
        },
      },
      

• 備注：props是只讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確定需要修改，那么請復制props的內容到data中一份，然后去修改data中的資料

組件的自定義事件

• 一種組件間通信的方式，適用于：子組件===>父組件

• 使用場景：A是父組件，B是子組件，B想給A傳資料，那么就要在A中給B系結自定義事件（事件的回呼在A中）

• 系結自定義事件

  • 在父組件中

    <Student @myClick="test"></Student>或者<Student v-on:myClick="test"></Student>
    

  • 在父組件中

    <Student ref="student"></Student>
    ...
    

    mounted() {
      this.$refs.student.$on("myClick", this.test);
    }
    

  • 若想讓自定義事件只能觸發一次，可以使用once修飾符，或者$once方法

• 觸發自定義事件：this.$emit("myClick", params)

• 解綁自定義事件：this.$off("myClick")

• 組件上也可以系結原生DOM事件，需要使用native修飾符，特別是在使用了element-ui組件時，定義的事件一般都是用native修飾，

• 注意：通過this.$refs.student.$on("myClick", this.test)系結自定義事件時，回呼要么配置在methods中，要么用箭頭函式，否則this指向會出問題！

全域事件總線（GlobalEventBus）

• 一種組件間通信的方式，適用于任意組件間的通信

• 安裝全域事件總線(main.js)：

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

• 使用全域事件總線：

  • 接受資料：A組件想接受資料，則在A組件中給$bus系結自定義事件，事件的回呼函式留在A組件中

    methods: {
      demo(data) {...},
    },
    mounted() {
      this.$bus.$on("xxx", this.demo)
    }
    

  • 提供資料

    this.$bus.$emit("xxx", params)
    

• 最好在beforeDestroy鉤子中用$off去解綁當前組件所用到的事件

訊息訂閱與發布（pubsub）

• 一種組件間通信的方式，適用于任意組件間的通信，

• 使用步驟：

  • 安裝pubsub

    npm install --save pubsub-js
    

  • 引入

    import pubsub from "pubsub-js"
    

  • 接受資料：A組件想接受資料，則在A組件中訂閱訊息，訂閱的回呼函式留在A組件中

    methods: {
      demo(data) {...},
    },
    mounted() {
      this.pubId = pubsub.subscribe("xxx", this.demo);
    }
    

  • 提供資料

    pubsub.publish("xxx", params);
    

• 最好在beforeDestroy鉤子中用

  pubsub.unsubscribe(this.pubId);
  

  去解綁當前組件所用到的事件

插槽

• 作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于父組件===>子組件
• 分類：默認插槽、具名插槽、作用域插槽
  -使用方式：
  • 默認插槽：
    • 父組件：

      <Category>
        <div>html結構</div>
      </Category>
      

    • 子組件：

      <template>
        <div>
          <!-- 定義插槽 -->
          <slot>一些描述內容</slot>
        </div>
      </template>
      

  • 具名插槽：
    • 父組件：

      <Category>
        <template slot="center">
          <div>html結構</div>
        </template>
        <template slot="footer">
          <div>html結構</div>
        </template>
      </Category>
      

    • 子組件：

      <template>
        <div>
          <!-- 定義插槽 -->
          <slot name="center">一些描述內容</slot>
          <slot name="footer">一些描述內容</slot>
        </div>
      </template>
      

  • 作用域插槽：

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

    • 具體實作：

      • 父組件：

        <Category>
          <template scope="dataset">
            <ul>
              <li v-for="(game, index) in dataset.games" :key="index">{{game}}</li>
            </ul>
          </template>
          <template scope="dataset">
            <ol>
              <li v-for="(game, index) in dataset.games" :key="index">{{game}}</li>
            </ol>
          </template>
        </Category>
        

      • 子組件：

        <template>
          <div>
            <!-- 定義插槽 -->
            <slot :games="games">一些描述內容</slot>
          </div>
        </template>
        

        <script>
          export default {
            name: "Category",
            props: ["title"],
            data() {
              return {
                games: ['紅色警戒', '穿越火線', '勁舞團', '超級瑪麗'],
              }
            },
          }
        </script>
        

Vuex（可參考博主的Vuex的使用及map方法）

• 概念：在Vue中實作集中式狀態（資料）管理的一個Vue插件，對vue應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間的通信

• 使用場景：多個組件需要共享資料

• 搭建Vuex環境

  • 創建檔案：src/store/index.js

    // 該檔案用于創建Vuex中最為核心的store
    // 引入Vuex
    import Vue from 'vue'
    // 引入Vuex插件
    import Vuex from "vuex"
    Vue.use(Vuex)
    // 準備actions--用于回應組件的動作
    const actions = {}
    // 準備mutations--用于操作資料（state）
    const mutations = {}
    // 準備state--用于存盤資料
    const state = {}
    
    const store = new Vuex.Store({
      actions,
      mutations,
      state,
    })
    
    export default store;
    

  • 在main.js中創建vm時傳入store配置項

    // 引入創建的store
    import store from "./store"
    
    new Vue({
      el: '#app',
      render: h=>h(App),
      // 使用store
      store,
      ...
    })
    

• 具體使用

  • 組件使用

    methods: {
      add() {
        this.$store.dispatch("add", params);
      },
      ...
    }
    

  • src/store/index.js配置

    // 準備actions--用于回應組件的動作
    const actions = {
      add(context, value) {
        context.commiit("ADD", value);
      },
      ...
    }
    // 準備mutations--用于操作資料（state）
    const mutations = {
      ADD(state, value) {
        state.sum += value;
      },
      ...
    }
    // 準備state--用于存盤資料
    const state = {
      sum: 0,
      ...
    }
    

標籤：其他

上一篇：原生js實作兩個時間相隔時長，自適應天時分秒

下一篇：掃盲貼：2021 CSS 最冷門特性都是些啥？