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 的父組件，完成共需六步：

子組件 Children.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>

父組件 Father.vue 內容，注意裏面的操作步驟：

<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 和 $ 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孫子組件傳值：

父組件 Father.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>

看運行效果，成功獲取：

 

點擊關注，第一時間瞭解華爲雲新鮮技術~