Vue元件間的傳值五大場景，你造嗎？

摘要：元件是 vue.js最強大的功能之一，這五個元件間傳值場景你了解嗎？

本文分享自華為雲社群《你了解Vue元件間傳值五大場景嗎？》，作者：北極光之夜。 。

父元件向子元件傳值：

比如有一個 Father.vue 的父元件要傳值給 Children.vue 的子元件，完成共需四步：

父元件 Father.vue 内容，注意裡面的操作步驟：

<template>
  <div>
     <h2>父元件區域</h2>
    <hr />
    <!-- 第二步：在引用的子元件标簽裡定義 :num="num" , num就是要傳遞的變量-->
    <Children :num="num"></Children>
  </div>
</template>

<script>
// 引入子元件
import Children from "./Children.vue";
export default {
  data() {
    return {
      // 第一步：我們将要把變量 num 的值傳給子元件Children
      num: 666,
    };
  },
  components: {
    Children,
  },
};
</script>      

子元件 Children.vue 内容，注意裡面的操作步驟：

<template>
  <div>
    <h2>子元件區域</h2>
    <!-- 第四步：在子元件顯示父元件傳過來的值 -->
    <i>父元件傳遞過了的值:{{ num }}</i>
  </div>
</template>
<script>
export default {
  //第三步： 子元件可以通過定義的props就可以接收來自父元件的變量值 num
  props: ["num"],
  data() {
    return {};
  },
};
</script>      

運作效果：

子元件向父元件傳值：

比如有一個 Children.vue 的子元件要傳值給 Father.vue 的父元件，完成共需六步：

<template>
  <div>
    <h2>子元件區域</h2>
    <!-- 第二步：得定義一個向父元件傳值的方法，比如定義一個按鈕，
    綁定一個點選事件，觸發giveFather方法 -->
    <button @click="giveFather">giveFather</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 第一步：我們将要把變量 word 的值傳給父元件
      word: "北極光之夜。",
    };
  },
  methods: {
    // 第三：定義子元件向父元件傳值的事件方法
    giveFather() {
      // 第四步：可以通過$emit傳值給父元件,第一個參數為傳值的方法，第二個參數為要傳遞的值
      this.$emit("giveFather", this.word);
    },
  },
};
</script>      

<template>
  <div>
    <h2>父元件區域</h2>
    <hr />
    <!-- 第五步：要在引用的子元件标簽裡定義一個自定義事件，
    該自定義事件要寫為子元件$emit的第一個參數一樣,
    然後雙引号裡的方法可以自定義，我這就為getSon -->
    <Children @giveFather="getSon"></Children>
  </div>
</template>

<script>
// 引入子元件
import Children from "./Children.vue";

export default {
  data() {
    return {};
  },
  components: {
    Children,
  },
  methods: {
    //第六步：定義擷取子元件值的方法，該方法的參數就為子元件傳遞過來的值
    getSon(temp) {
      // 控制台輸出看看能不能擷取
      console.log(temp);
    },
  },
};
</script>      

兄弟元件間傳值：

比如有一個 Father.vue 的父元件，它有一個Children.vue 的子元件和一個Son.vue 的子元件，那麼，Children.vue 和 Son.vue 就是兄弟關系，現在 Children.vue 要向兄弟 Son.vue 傳值：

首先在vue原型上定義一個新的執行個體，main.js檔案内容，注意裡面的操作步驟：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 第一步，在vue原型上定義一個自己的方法，一般叫$bus，為vue執行個體
Vue.prototype.$bus = new Vue();

new Vue({
  render: h => h(App),
}).$mount('#app')      

Children.vue 内容，注意裡面的操作步驟：

<template>
  <div>
    <h2>Children子元件區域</h2>
    <!-- 第三步：定義一個向兄弟元件傳值的方法，比如定義一個按鈕，
    綁定一個點選事件，觸發giveSon方法 -->
    <button @click="giveSon">giveSon</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 第二步：我們将要把變量 word 的值傳給兄弟元件
      word: "北極光之夜。",
    };
  },
  methods: {
    // 第四：定義子元件向兄弟元件傳值的事件方法
    giveSon() {
      // 第五步：可以通過自定義的$bus的$emit傳值給兄弟元件,
      //第一個參數為傳值的方法，第二個參數為要傳遞的值
      this.$bus.$emit("giveSon", this.word);
    },
  },
};
</script>      

Son.vue 内容，注意裡面的操作步驟：

<template>
  <div>
    <h2>Son子元件區域</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {
    //第六步：通過$on方法進行擷取兄弟傳遞過來的值。
    //第一個參數為兄弟元件傳值的方法，第二個參數是自定義的方法
    this.$bus.$on("giveSon", this.getSon);
  },
  methods: {
    //第七步，自定義的方法,參數就是兄弟傳過來的值
    getSon(temp) {
      //輸出看看
      console.log(temp);
    },
  },
};
</script>      

總結就是，在vue原型上定義一個新的執行個體， 然後采用 emit 和emit和 on 這兩個方法進行擷取傳遞過來的值。

使用Vuex狀态機傳值：

Vuex是實作元件全局狀态(資料)管理的一種機制，可以很友善的實作元件之間資料的共享。

關于Vuex的詳細使用，可以看這篇文章，指路👉：https://auroras.blog.csdn.net/article/details/117536679

給後代元件傳值，provide和inject：

比如有一個 Father.vue 的父元件，它有一個Children.vue 的子元件，那麼這個Children.vue 的子元件是他的後代。而若Children.vue 也有一個子元件 grandSon.vue，那麼grandSon.vue 就相當于 Father.vue的孫子元件，同樣，grandSon.vue也會是Father.vue的後代。以此類推，它的孫子，孫子的孫子等等都是它後代。現在我們實作Father.vue 給它的後代grandSon.vue孫子元件傳值：

<template>
  <div>
    <h2>父元件區域</h2>
    <hr />
    <Children></Children>
  </div>
</template>

<script>
// 引入子元件
import Children from "./Children.vue";
export default {
  data() {
    return {
      // 第一步：定義一個變量，我們将要把變量 num 的值傳給後代元件grandSon.vue
      num: "北極光之夜",
    };
  },
  // 第二步，定義一個provide函數
  provide() {
    //第三步，如下定義，給後代接收
    //giveAfter名稱為自己定義，任意起，this固定寫法
    return {
      giveAfter: this,
    };
  },
  components: {
    Children,
  },
};
</script>      

子元件Children.vue 内容，沒什麼，引入子元件就行：

<template>
  <div>
    <h2>
      Children子元件區域
      <hr />
      <Grand-son></Grand-son>
    </h2>
  </div>
</template>
<script>
// 引入子元件
import GrandSon from "./GrandSon.vue";
export default {
  data() {
    return {};
  },

  components: {
    GrandSon,
  },
};
</script>      

孫子元件GrandSon.vue 内容，注意裡面的操作步驟：

<template>
  <div>
    GrandSon孫子元件區域
    <!-- 第六步：展示資料 -->
    <i> {{ num }}</i>
  </div>
</template>
<script>
export default {
  //第四步：定義inject,裡面寫祖先元件自定義的名稱
  inject: ["giveAfter"],
  data() {
    return {
      // 第五步：取得祖先元件傳的值，this.giveAfter.要傳遞值的變量名
      //指派給num
      num: this.giveAfter.num,
    };
  },
};
</script>      

看運作效果，成功擷取：

點選關注，第一時間了解華為雲新鮮技術~