vue組件傳值的方法：1、父向子傳值使用props；2、子向父傳值使用“$emit”；3、使用EventBus或Vuex進(jìn)行兄弟傳值；4、使用“provide/inject”或“$attrs/$listeners”方法進(jìn)行跨級傳值。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版、Dell G3電腦。

我們都知道 Vue 作為一個輕量級的前端框架，其核心就是組件化開發(fā)。Vue 就是由一個一個的組件構(gòu)成的，組件化是它的精髓，也是最強(qiáng)大的功能之一。而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。

但在實(shí)際項(xiàng)目開發(fā)過程中，我們需要訪問其他組件的數(shù)據(jù)，這樣就就有了組件通信的問題。在 vue 中組件之間的關(guān)系有：父子，兄弟，隔代。針對不同的關(guān)系，怎么實(shí)現(xiàn)數(shù)據(jù)傳遞，就是接下來要講的。

一、父組件向子組件傳值

即父組件通過屬性的方式向子組件傳值，子組件通過 props 來接收。

• 在父組件的子組件標(biāo)簽中綁定自定義屬性

• // 父組件 <user-detail :myName="name" />      export default {     components: {         UserDetail     }     ...... }

• 在子組件中使用props（可以是數(shù)組也可以是對象）接收即可?？梢詡鞫鄠€屬性。

• // 子組件 export default {     props: ['myName'] }  /* props: { myName: String } //這樣指定傳入的類型，如果類型不對會警告 props: { myName: [String, Number] } // 多個可能的類型 prosp: { myName: { type: String, requires: true } } //必填的的字符串 props: {      childMsg: {          type: Array,          default: () => []      } }  // default指定默認(rèn)值 如果 props 驗(yàn)證失敗，會在控制臺發(fā)出一個警告。 */

子組件接收的父組件的值分為引用類型和普通類型兩種：

　　普通類型：字符串（String）、數(shù)字（Number）、布爾值（Boolean）、空（Null）

　　引用類型：數(shù)組（Array）、對象（Object）

基于 vue 的單向數(shù)據(jù)流，即組件之間的數(shù)據(jù)是單向流通的，子組件是不允許直接對父組件傳來的值進(jìn)行修改的，所以應(yīng)該避免這種直接修改父組件傳過來的值的操作，否則控制臺會報錯。

• 如果傳過來的值是簡單數(shù)據(jù)類型，是可以在子組件中修改，也不會影響其他兄弟組件內(nèi)同樣調(diào)用了來自該父組件的值。

  具體操作是可以先把傳過來的值重新賦值給data中的一個變量，然后再更改那個變量。

• // 子組件 export default {     props: ['myName'],     data() {         return {             name : this.myName    // 把傳過來的值賦值給新的變量         }     },     watch: {         myName(newVal) {             this.name = newVal //對父組件傳過來的值進(jìn)行監(jiān)聽，如果改變也對子組件內(nèi)部的值進(jìn)行改變         }     },     methods: {         changeName() {               this.name = 'Lily'  // 這里修改的只是自己內(nèi)部的值，就不會報錯了         },     } }

  注：如果不使用 watch 來監(jiān)聽父組件傳遞的 myName 值，子組件中的 name 值是不會隨著父組件的 myName 值進(jìn)行改變，因?yàn)?data 中 name: this.myName 僅僅只是定義了一個初始值。

• 如果引用類型的值，當(dāng)在子組件中修改后，父組件的也會修改，因其數(shù)據(jù)是公用的，其他同樣引用了該值的子組件也會跟著被修改?？梢岳斫獬筛附M件傳遞給子組件的值，就相當(dāng)于復(fù)制了一個副本，這個副本的指針還是指向父組件中的那個，即共享同一個引用。所以除非有特殊需要，否則不要輕易修改。

二、子組件向父組件傳值

1、子組件綁定一個事件，通過 this.$emit() 來觸發(fā)

在子組件中綁定一個事件，并給這個事件定義一個函數(shù)

// 子組件 <button @click="changeParentName">改變父組件的name</button>  export default {     methods: {         //子組件的事件         changeParentName: function() {             this.$emit('handleChange', 'Jack') // 觸發(fā)父組件中handleChange事件并傳參Jack             // 注：此處事件名稱與父組件中綁定的事件名稱要一致         }     } }

在父組件中定義并綁定 handleChange 事件

// 父組件 <child @handleChange="changeName"></child>  methods: {     changeName(name) {  // name形參是子組件中傳入的值Jack         this.name = name     } }

2、通過 callback 函數(shù)

先在父組件中定義一個callback函數(shù)，并把 callback 函數(shù)傳過去

// 父組件 <child :callback="callback"></child> methods: {     callback: function(name) {        this.name = name     } }

在子組件中接收，并執(zhí)行 callback 函數(shù)

// 子組件 <button @click="callback('Jack')">改變父組件的name</button> props: {     callback: Function, }

3、通過 $parent / $children 或 $refs 訪問組件實(shí)例

這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。

// 子組件 export default {   data () {     return {       title: '子組件'     }   },   methods: {     sayHello () {         console.log('Hello');     }   } }

// 父組件 <template>   <child ref="childRef" /> </template>  <script>   export default {     created () {       // 通過 $ref 來訪問子組件       console.log(this.$refs.childRef.title);  // 子組件       this.$refs.childRef.sayHello(); // Hello              // 通過 $children 來調(diào)用子組件的方法       this.$children.sayHello(); // Hello      }   } </script>

注：這種方式的組件通信不能跨級。

4. $attrs / $listeners 詳解點(diǎn)這里

三、兄弟組件之間傳值

1、還是通過 $emit 和 props 結(jié)合的方式

在父組件中給要傳值的兩個兄弟組件都綁定要傳的變量，并定義事件

// 父組件 <child-a :myName="name" /> <child-b :myName="name" @changeName="editName" />        export default {     data() {         return {             name: 'John'         }     },     components: {         'child-a': ChildA,         'child-b': ChildB,     },     methods: {         editName(name) {             this.name = name         },     } }

在子組件B中接收變量和綁定觸發(fā)事件

// child-b 組件 <p>姓名：{{ myName }}</p> <button @click="changeName">修改姓名</button>      <script> export default {     props: ["myName"],     methods: {         changeName() {             this.$emit('changeName', 'Lily')   // 觸發(fā)事件并傳值         }     } } </script>

// child-a 組件 <p>姓名：{{ newName }}</p>      <script> export default {     props: ["myName"],     computed: {         newName() {             if(this.myName) { // 判斷是否有值傳過來                 return this.myName             }             return 'John' //沒有傳值的默認(rèn)值         }     } } </script>

即：當(dāng)子組件B 通過 $emit() 觸發(fā)了父組件的事件函數(shù) editName，改變了父組件的變量name 值，父組件又可以把改變了的值通過 props 傳遞給子組件A，從而實(shí)現(xiàn)兄弟組件間數(shù)據(jù)傳遞。

2. 通過一個空 vue 實(shí)例

創(chuàng)建一個 EventBus.js 文件，并暴露一個 vue 實(shí)例

import Vue from 'Vue'export default new Vue()

在要傳值的文件里導(dǎo)入這個空 vue 實(shí)例，綁定事件并通過 $emit 觸發(fā)事件函數(shù)

(也可以在 main.js 中全局引入該 js 文件，我一般在需要使用到的組件中引入)

<template>     <div>         <p>姓名: {{ name }}</p>         <button @click="changeName">修改姓名</button>     </div> </template>  <script> import { EventBus } from "../EventBus.js"  export default {  data() {      return {          name: 'John',      }   },   methods: {       changeName() {           this.name = 'Lily'           EventBus.$emit("editName", this.name) // 觸發(fā)全局事件,并且把改變后的值傳入事件函數(shù)       }     } } </script>

在接收傳值的組件中也導(dǎo)入 vue 實(shí)例，通過 $on 監(jiān)聽回調(diào)，回調(diào)函數(shù)接收所有觸發(fā)事件時傳入的參數(shù)

import { EventBus } from "../EventBus.js"  export default {     data() {         return {             name: ''         }     },     created() {          EventBus.$on('editName', (name) => {              this.name = name          })     } }

這種通過創(chuàng)建一個空的 vue 實(shí)例的方式，相當(dāng)于創(chuàng)建了一個事件中心或者說是中轉(zhuǎn)站，用來傳遞和接收事件。這種方式同樣適用于任何組件間的通信，包括父子、兄弟、跨級，對于通信需求簡單的項(xiàng)目比較方便，但對于更復(fù)雜的情況，或者項(xiàng)目比較大時，可以使用 vue 提供的更復(fù)雜的狀態(tài)管理模式 Vuex 來進(jìn)行處理。

3. 使用 vuex →點(diǎn)這里

四、多層父子組件通信

有時需要實(shí)現(xiàn)通信的兩個組件不是直接的父子組件，而是祖父和孫子，或者是跨越了