站長(zhǎng)資訊網(wǎng)vue組件傳值的方法：1、父向子傳值使用props；2、子向父?jìng)髦凳褂谩?emit”；3、使用EventBus或Vuex進(jìn)行兄弟傳值；4、使用“provide/inject”或“$attrs/$listeners”方法進(jìn)行跨級(jí)傳值。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版、Dell G3電腦。
我們都知道 Vue 作為一個(gè)輕量級(jí)的前端框架，其核心就是組件化開(kāi)發(fā)。Vue 就是由一個(gè)一個(gè)的組件構(gòu)成的，組件化是它的精髓，也是最強(qiáng)大的功能之一。而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。
但在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，我們需要訪問(wèn)其他組件的數(shù)據(jù)，這樣就就有了組件通信的問(wèn)題。在 vue 中組件之間的關(guān)系有：父子，兄弟，隔代。針對(duì)不同的關(guān)系，怎么實(shí)現(xiàn)數(shù)據(jù)傳遞，就是接下來(lái)要講的。
一、父組件向子組件傳值
即父組件通過(guò)屬性的方式向子組件傳值，子組件通過(guò) props 來(lái)接收。
-
在父組件的子組件標(biāo)簽中綁定自定義屬性
-
// 父組件 <user-detail :myName="name" /> export default { components: { UserDetail } ...... } -
在子組件中使用props（可以是數(shù)組也可以是對(duì)象）接收即可。可以傳多個(gè)屬性。
-
// 子組件 export default { props: ['myName'] } /* props: { myName: String } //這樣指定傳入的類型，如果類型不對(duì)會(huì)警告 props: { myName: [String, Number] } // 多個(gè)可能的類型 prosp: { myName: { type: String, requires: true } } //必填的的字符串 props: { childMsg: { type: Array, default: () => [] } } // default指定默認(rèn)值 如果 props 驗(yàn)證失敗，會(huì)在控制臺(tái)發(fā)出一個(gè)警告。 */
子組件接收的父組件的值分為引用類型和普通類型兩種：
普通類型：字符串（String）、數(shù)字（Number）、布爾值（Boolean）、空（Null）
引用類型：數(shù)組（Array）、對(duì)象（Object）
基于 vue 的單向數(shù)據(jù)流，即組件之間的數(shù)據(jù)是單向流通的，子組件是不允許直接對(duì)父組件傳來(lái)的值進(jìn)行修改的，所以應(yīng)該避免這種直接修改父組件傳過(guò)來(lái)的值的操作，否則控制臺(tái)會(huì)報(bào)錯(cuò)。
-
如果傳過(guò)來(lái)的值是簡(jiǎn)單數(shù)據(jù)類型，是可以在子組件中修改，也不會(huì)影響其他兄弟組件內(nèi)同樣調(diào)用了來(lái)自該父組件的值。
具體操作是可以先把傳過(guò)來(lái)的值重新賦值給data中的一個(gè)變量，然后再更改那個(gè)變量。
-
// 子組件 export default { props: ['myName'], data() { return { name : this.myName // 把傳過(guò)來(lái)的值賦值給新的變量 } }, watch: { myName(newVal) { this.name = newVal //對(duì)父組件傳過(guò)來(lái)的值進(jìn)行監(jiān)聽(tīng)，如果改變也對(duì)子組件內(nèi)部的值進(jìn)行改變 } }, methods: { changeName() { this.name = 'Lily' // 這里修改的只是自己內(nèi)部的值，就不會(huì)報(bào)錯(cuò)了 }, } }注：如果不使用 watch 來(lái)監(jiān)聽(tīng)父組件傳遞的 myName 值，子組件中的 name 值是不會(huì)隨著父組件的 myName 值進(jìn)行改變，因?yàn)?data 中 name: this.myName 僅僅只是定義了一個(gè)初始值。
-
如果引用類型的值，當(dāng)在子組件中修改后，父組件的也會(huì)修改，因其數(shù)據(jù)是公用的，其他同樣引用了該值的子組件也會(huì)跟著被修改。可以理解成父組件傳遞給子組件的值，就相當(dāng)于復(fù)制了一個(gè)副本，這個(gè)副本的指針還是指向父組件中的那個(gè)，即共享同一個(gè)引用。所以除非有特殊需要，否則不要輕易修改。
二、子組件向父組件傳值
1、子組件綁定一個(gè)事件，通過(guò) this.$emit() 來(lái)觸發(fā)
在子組件中綁定一個(gè)事件，并給這個(gè)事件定義一個(gè)函數(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、通過(guò) callback 函數(shù)
先在父組件中定義一個(gè)callback函數(shù)，并把 callback 函數(shù)傳過(guò)去
// 父組件 <child :callback="callback"></child> methods: { callback: function(name) { this.name = name } }
在子組件中接收，并執(zhí)行 callback 函數(shù)
// 子組件 <button @click="callback('Jack')">改變父組件的name</button> props: { callback: Function, }
3、通過(guò) $parent / $children 或 $refs 訪問(wèn)組件實(shí)例
這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問(wèn)數(shù)據(jù)。
// 子組件 export default { data () { return { title: '子組件' } }, methods: { sayHello () { console.log('Hello'); } } }
// 父組件 <template> <child ref="childRef" /> </template> <script> export default { created () { // 通過(guò) $ref 來(lái)訪問(wèn)子組件 console.log(this.$refs.childRef.title); // 子組件 this.$refs.childRef.sayHello(); // Hello // 通過(guò) $children 來(lái)調(diào)用子組件的方法 this.$children.sayHello(); // Hello } } </script>
注：這種方式的組件通信不能跨級(jí)。
4. $attrs / $listeners 詳解點(diǎn)這里
三、兄弟組件之間傳值
1、還是通過(guò) $emit 和 props 結(jié)合的方式
在父組件中給要傳值的兩個(gè)兄弟組件都綁定要傳的變量，并定義事件
// 父組件 <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) { // 判斷是否有值傳過(guò)來(lái) return this.myName } return 'John' //沒(méi)有傳值的默認(rèn)值 } } } </script>
即：當(dāng)子組件B 通過(guò) $emit() 觸發(fā)了父組件的事件函數(shù) editName，改變了父組件的變量name 值，父組件又可以把改變了的值通過(guò) props 傳遞給子組件A，從而實(shí)現(xiàn)兄弟組件間數(shù)據(jù)傳遞。
2. 通過(guò)一個(gè)空 vue 實(shí)例
創(chuàng)建一個(gè) EventBus.js 文件，并暴露一個(gè) vue 實(shí)例
import Vue from 'Vue'export default new Vue()
在要傳值的文件里導(dǎo)入這個(gè)空 vue 實(shí)例，綁定事件并通過(guò) $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í)例，通過(guò) $on 監(jiān)聽(tīng)回調(diào)，回調(diào)函數(shù)接收所有觸發(fā)事件時(shí)傳入的參數(shù)
import { EventBus } from "../EventBus.js" export default { data() { return { name: '' } }, created() { EventBus.$on('editName', (name) => { this.name = name }) } }
這種通過(guò)創(chuàng)建一個(gè)空的 vue 實(shí)例的方式，相當(dāng)于創(chuàng)建了一個(gè)事件中心或者說(shuō)是中轉(zhuǎn)站，用來(lái)傳遞和接收事件。這種方式同樣適用于任何組件間的通信，包括父子、兄弟、跨級(jí)，對(duì)于通信需求簡(jiǎn)單的項(xiàng)目比較方便，但對(duì)于更復(fù)雜的情況，或者項(xiàng)目比較大時(shí)，可以使用 vue 提供的更復(fù)雜的狀態(tài)管理模式 Vuex 來(lái)進(jìn)行處理。
3. 使用 vuex →點(diǎn)這里
四、多層父子組件通信
有時(shí)需要實(shí)現(xiàn)通信的兩個(gè)組件不是直接的父子組件，而是祖父和孫子，或者是跨越了
