前端開發：組件之間的傳值(父傳子、子傳父、兄弟組件之間傳值)的使用

前言

在前端開發的時候，處理資料、傳遞資料是非常常用的操作方式，也是前端開發作業中非常重要的部分，尤其是在前端開發程序中的組件之間的資料傳遞，是必用操作，那么本篇博文就來分享一下在前端開發的時候，對于在使用組件的時候進行資料傳遞處理的操作使用，

首先來了解一下在前端Vue開發程序中常用的組件之間的傳值場景，有三種：父組件傳值到子組件、子組件傳值到父組件、兄弟組件之間的傳值，其他延伸的組件之間的傳值場景：孫子組件傳值給爺爺組件、祖父組件傳值給曾孫組件等等隔代關系傳值，這些跨三級以上的組件的傳值延伸情景，其實還是常用的三種傳值的結合使用，這里就不再多說，只要掌握常用的三種傳值方式就可應對各種變種延伸的情景，

一、父組件傳值到子組件

通過父組件傳值到子組件，其實就是把父組件的資料傳遞到子組件中并進行對應的業務操作，因為父組件中的資料如果不通過資料傳值操作子組件是無法直接使用的，具體的父組件傳值到子組件的使用如下所示：

定義一個資料源：fruits:[“Apple”,”Banana”,”Cherry”]; //把這個陣列的資料從父組件傳遞到子組件中

1、父組件的寫法

<template>

  <div id="app">

    <users v-bind:fruits="fruits”></users>  //前一個自定義名稱便于子組件呼叫，后面的是要傳遞資料名，這里的v-bind可以省略不寫

  </div>

</template>

<script>

import Fruits from "./components/Fruits”

export default {

  name: 'App',

  data(){

    return{

      fruits:[“Apple”,”Banana”,”Cherry”];

    }

  },

  components:{

    "fruits":Fruits

  }

}

2、子組件的寫法

<template>

  <div class=“son”>

    <ul>

      <li v-for="fruit in fruits">{{ fruit }}</li>//遍歷傳遞過來的值，然后呈現到頁面

    </ul>

  </div>

</template>

<script>

export default {

  name: ’son’,

  props:{

    fruits:{           //這就是父組件中標簽自定義的名字

      type:Array,

      required:true

    }

  }

}

</script>

3、總結

父組件通過props給子組件傳值的（組件中的資料有三種：data、props、computed），

二、子組件傳值到父組件

子組件傳值到父組件，其實就是把子組件中需要修改父組件傳遞過來的資料以及操作更新，回傳給父組件，讓父組件改變原始資料，具體的子組件傳值到父組件的使用如下所示：

在子組件中通過點擊事件的形式來向父組件傳遞需要改變的值，然后讓父組件進行對應的修改，

1、子組件的寫法

<template>

  <header>

    <h1 @click="changeValue”>{{title}}</h1>  //在標簽上面系結一個點擊事件

  </header>

</template>

<script>

export default {

  name: ‘son’,

  data() {

    return {

      title:”test test test”

    }

  },

  methods:{

    changeValue() {

      this.$emit(“valueChanged", “hello world”); //自定義事件, 通過$emit傳遞的值“hello world”給父組件

    }

  }

}

</script>

2、父組件的寫法

<template>

  <div id="app">

    <Son :valueChanged="updateValue” ></Son> //與子組件valueChanged自定義事件保持一致

    <h2>{{title}}</h2> //把父組件的title的值由“123”改為“hello world”

  </div>

</template>

<script>

import Son from "./components/Son”

export default {

  name: 'App',

  data(){

    return{

      title:”123”

    }

  },

 components:{

   Son

  },

  methods:{

    updateValue(value){   //在父組件中宣告這個函式

      this.title = value;

    }

  },

}

</script>

3、總結

子組件通過$emit把資料傳遞到父組件中，也就是子組件把自己的資料發送到父組件中，

三、兄弟組件之間傳值

兄弟組件之間傳值，其實就是同級的兩個組件之間的資料傳遞，比如子組件A 把當前資料傳遞給子組件B中，兄弟組件之間的傳值有兩種方式：第一種就是通過以同級的父組件為中轉，第二種就是通過Bus中央事件總線，具體的兄弟組件之間傳值的使用如下所示：

1、兄弟組件之間的傳值可以通過同一級的父組件做為中轉，如下所示：

<div> //父組件C

    <A></A>    //子組件A

    <B></B>　//子組件B

</div>

子組件A要向子組件B傳值: 可以通過子組件A用$emit傳給父組件C、父組件C使用props把子組件A的值傳給子組件B中，也就是使用父組件做中轉，原理就是把上面的父組件傳值到子組件、子組件傳值到父組件結合起來使用，這里就不再舉具體的例子，

2、兄弟組件之間的傳值還可以通Bus中央事件總線

（1）Bus.js檔案：

import Vue from 'vue'

export default new Vue;

（2）父組件寫法：

<div> //父組件C

    <A></A>    //子組件A

    <B></B>　//子組件B

</div>

（3）子組件A

<button @click="aaa">傳值</button> //點擊按鈕向子組件B傳值

import Bus from "../api/Bus";   //引入bus

export default {

  data() {

    return {

      aa: 100

    };

  },

  methods: {

    aaa() {

      Bus.$emit("bbb", this.aa++, “子組件A向子組件B傳值”);    //儲存 Bus.$emit

    }

  }

};

（4）子組件B

<span>{{dd}}</span>

import Bus from "../api/Bus";

export default {

  data() {

    return {

      dd: "",

    };

  },

  created() {

    Bus.$on("bbb", (val) => {    //獲取 Bus.$on

      this.dd= val;

    });

  }

};

3、總結

兄弟組件之間傳值與父子組件之間的傳值，其實和子組件向父組件傳值有些類似，其實它們的通信原理都是相同的，使用Vue實體來作為中央事件總線來管理組件通信的方法只適用于通信需求稍微簡單的專案，如果有更復雜的情況，需要使用狀態管理模式Vuex來進行處理，

最后

經過上文的內容可以完全掌握在前端開發程序中組件通信傳值相關的知識點，讀完本篇文章就可以完全學會，尤其是剛入門的開發者，更應該好好掌握上面的知識點，這里就不再贅述，

以上就是本章的全部內容，歡迎關注三掌柜的微信公眾號“程式猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，歡迎關注！

三掌柜的微信公眾號：

三掌柜的新浪微博：