腳本之家服務器常用軟件

快捷導航

Vue如何解決兄弟組件之間傳值問題

更新時間：2022年09月02日 14:47:59 作者：王大瑞的騰

這篇文章主要介紹了Vue如何解決兄弟組件之間傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

解決兄弟組件之間傳值問題

vue中父組件向子組件傳遞參數(shù)時，可以通過prop來傳遞參數(shù)，prop可以是數(shù)組形式，也可以是對象格式，子向父組件傳遞參數(shù)時，通過$emit來傳遞，$emit（'方法名', 傳參），來實現(xiàn)子組件和父組件數(shù)據(jù)交互，但是在父組件中，有好多個子組件，這些子組件怎么樣來進行數(shù)據(jù)通訊呢？

有的同學會立馬想到 vuex ，答案是：可以的，但是會不會大材小用？在項目中，只是個別組件需要用到通訊，我們是不會優(yōu)先考慮vuex來解決的。

下面我們可以使用一個特別好用的方法來實現(xiàn)兄弟組件之間數(shù)據(jù)通訊

bus.js 顧名思義巴士，所有人都可以上車，不管你在哪里，不管你是什么組件，我都可以開車過去接你。

bus可以通過兩種方式來實現(xiàn)

1. 通過創(chuàng)建.js文件局部方式來實現(xiàn)，在需要用到的組件中引入，然后調(diào)用它即可

在項目的utils文件中創(chuàng)建一個js文件，在正常的項目種，會用utils來存放哪些共用的js文件，這些js文件是一些常用的方法或例如這個bus

// bus.js
import Vue from 'vue';
export default new Vue();

接下來，哪個組件需要發(fā)車你就在哪里import給它建立一個發(fā)車點

// 在 vue組件中引入
import bus from "../../utils/bus";

然后這里我們在vue的實例中的methods函數(shù)中定義一個方法來觸發(fā)這個bus發(fā)車

methods: {
? ? ? busFun(data) {
? ? ? ? // 通過 $emit 來觸發(fā)方法，參數(shù)1 是定義方法名，參數(shù)2 是你要發(fā)送的數(shù)據(jù)
? ? ? ? bus.$emit('name', data)
? ? ? },
? ? }

這里千萬要注意了，若你使用多個bus 那么參數(shù)1命名千萬別重復，否則其他組件會出現(xiàn)無故上車的情況，這個bus中可以給無數(shù)個組件使用，但是命名不能重復，除非你創(chuàng)建多個bus。

接下來我們就看看這輛巴士有哪個組件要上車。

同樣，如果其他組件要上車，我們必須要在這個組件中設立一個車站，不然巴士不知道要在哪里接這個組件。

// 這個組件需要上車，我們先設立一個車站
import bus from "../../utils/bus";

設立車站后，我們就需要通過 bus.$on來觸發(fā)，也就是上車的技能

?created() {
? ? ? bus.$on('name', (data) => {
? ? ? ? console.log(data, '上車成功');
? ? ? })
? ? },
? ? // 打卡
? ? beforeDestroy() {
? ? ? bus.$off('name');
? ? },

這里會有同學會疑惑，為什么上車后需要打卡？？？

我們先說從上往下說吧，首先我們必須要在 vue 的created鉤子函數(shù)中來觸發(fā)這個bus，在頁面還沒加載的時候我們先觸發(fā)它然后拿到數(shù)據(jù)，在created中執(zhí)行，我們可以避免很多坑，例如觸發(fā)bus無法拿到數(shù)據(jù)等問題(想了解的同學去問度娘，這里就不說明了)。

然后我們每次觸發(fā)這個bus的時候，我們必須在整個生命周期走完的時候?qū)⑦@個bus給移除掉。

簡單粗暴的說，就是我們每個組件上車的時候，我們必須要給它打卡掉，讓后面的bus知道這個組件已經(jīng)上車了，不需要在這里等待，接到就開走，頭都不回的那種。

執(zhí)行beforeDestroy來銷毀這個bus方法，是避免方法“冗余”，若不清除這個方法，那將會出現(xiàn)多個bus觸發(fā)，每次都會將這輛bus停留在這個vue的生命周期中，打開控制臺你會發(fā)現(xiàn)有好多輛bus在這里停留，因為我們每次觸發(fā)bus時，就會開一輛巴士出來，而不是這輛巴士一直重復開的原因。

2. 接下來我們就說一下第二種方式

// 我們在main.js中用常量創(chuàng)建一個bus，然后將它放入Vue實例的原型對象中。
const bus = new Vue()
Vue.prototype.$bus = bus;

然后我們就可以在全局通過this.$bus來開巴士了（#滑稽）。接下來只要開穩(wěn)就可以為所欲為了。

?created() {
? ? ? this.$bus.$on('name', (data) => {
? ? ? ? console.log(data, '上車成功');
? ? ? })
? ? },
? ? // 打卡
? ? beforeDestroy() {
? ? ? this.$bus.$off('name');
? ? },

最后別忘了給乘客打卡哦！

各類組件間傳值方法(父子、兄弟、頁級)

熟悉vue各類關(guān)系的組件之間傳值方法會令開發(fā)更加得心應手，下面將對父子、兄弟、頁級組件之間的傳值作淺談。

父子關(guān)系組件

- 父向子組件傳值

父組件向子組件傳值通常是利用props屬性。首先，在子組件里定義一個props值用來接收父組件數(shù)據(jù)；然后調(diào)用子組件并v-bind綁定這個props值 = 父組件的data值。

父組件代碼：

<template>
? <div class="home">
? ? <HelloWorld :newMsg="msg" />?
? ? //綁定子組件newMsg(props值) = 父組件msg(data值)
? </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
? name: "Home",
? data(){
? ? return{msg:'Welcome to Vue.js'} //父組件數(shù)據(jù)msg
? },
? components: {HelloWorld}
};
</script>

子組件代碼：

<template>
? <div>
? ? <h1>{{ newMsg }}</h1> ?//直接調(diào)用newMsg，顯示“Welcome to Vue.js”
? </div>
</template>

<script>
export default {
? name: "HelloWorld",
? props: {newMsg: String} ?//為子組件定義newMsg(props值)接收父組件msg
? //或者props:['newMsg']
};
</script>

- 子向父組件傳值

子組件向父組件傳值有兩種方式：

1. 利用$emit()方法。首先在子組件中用$emit()向上傳遞一個自定義事件并附帶想要傳遞的數(shù)據(jù)；然后在父組件v-on監(jiān)聽這個自定義事件并自動接收到數(shù)據(jù)；最后在響應該事件的方法中進行數(shù)據(jù)操作。

子組件代碼：

<script>
export default {
? name: "HelloWorld",
? data() {
? ? return {msg:"Welcome to Vue"} //data值，即將向上傳遞的值
? },
? created(){
? ? this.$emit('change',this.msg) //向上傳遞自定義事件change和data值。這里我調(diào)用created生命周期函數(shù)觸發(fā)$emit()
? }
};
</script>

父組件代碼：

<template>
? <div class="home">
? ? <HelloWorld @change="handle" /> //監(jiān)聽到子組件傳遞來的事件并響應handle方法
? ? <span>{{newMsg}}</span> ?//直接調(diào)用newMsg，顯示“Welcome to Vue”
? </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
? name: "Home",
? data() {
? ? return {newMsg:""}
? },
? methods:{
? ? handle(msg){ ? ? ? ? ? //定義handle方法，將自動接收到的msg值給了自己的newMsg
? ? ? this.newMsg = msg
? ? }
? },
? components: {HelloWorld}
};
</script>

2.利用ref屬性。 ref是vue提供的內(nèi)部屬性，它其實相當于類似"id""class"的標識。首先在子組件上定義ref值(例:ref="son")；然后在父組件中用this.\$refs.son即可獲取到son這個ref的組件，進行操作。

子組件代碼：

<script>
export default {
? name: "HelloWorld",
? data() {
? ? return {msg:"Welcome to Vue"} ?//即將向父傳遞的data值
? }
};
</script>

父組件代碼：

<template>
? <div class="home">
? ? <HelloWorld ref="son" /> ?//在子組件上定義一個ref 名為"son"
? </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
? name: "Home",
? mounted(){
? ? console.log(this.$refs.son.msg) ?//獲取到ref名為"son"的子組件內(nèi)msg數(shù)據(jù)，在控制臺顯示“Welcome to Vue”
? },
? components:{HelloWorld}
};
</script>

兄弟關(guān)系組件

兄弟組件間的傳值方式我稱為 “總線轉(zhuǎn)送” 。原理很簡單，利用父組件作為總線去轉(zhuǎn)送數(shù)據(jù)。首先，用上述講到的ref屬性或$emit()將組件A的數(shù)據(jù)向上傳遞給父組件；再由父組件通過props屬性向下傳值到組件B。

組件A代碼：

<template>
? <div>click me</div>
</template>

<script>
export default {
? name: "HelloWorld",
? data() {
? ? return {helloMsg:"Welcome to Vue"} //即將傳送的數(shù)據(jù)helloMsg
? }
};
</script>

組件B代碼：

<template>
? <div>
? ? {{hiMsg}} ?//直接調(diào)用hiMsg，顯示“Welcome to Vue”
? </div>
</template>

<script>
export default {
? name: "Hi",
? props:{hiMsg:String} //用來接收父組件傳值的props屬性hiMsg
};
</script>

父組件代碼：

<template>
? <div class="home">
? ? <HelloWorld ref="son" @click.native="change"></HelloWorld> //定義ref屬性接收組件A傳來的數(shù)據(jù)；點擊組件A觸發(fā)change()
? ? <Hi :hiMsg="msg"></Hi> ?//綁定組件B的hiMsg=msg，將數(shù)據(jù)轉(zhuǎn)發(fā)給組件B
? </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import Hi from "@/components/Hi.vue";
export default {
? name: "Home",
? data(){
? ? return{ msg: "" }
? },
? methods:{
? ? change(){
? ? ? return this.msg = this.$refs.son.helloMsg //將組件A傳來的helloMsg賦予this.msg
? ? }
? },
? components:{HelloWorld, Hi}
};
</script>

頁級關(guān)系組件

在vuecli3.0以后，項目結(jié)構(gòu)對組件級別作了明確的區(qū)別：入口組件(App) - 頁級組件(View) - 零件組件(Component)。一般在開發(fā)中我們也會盡量按照這種結(jié)構(gòu)去劃分模塊，但頁級組件沒有父組件，如果說頁級組件之間需要傳值，那就不能用“總線轉(zhuǎn)送”的方法了。

vuex：這是官方提供的一個插件，可稱為“狀態(tài)管理倉庫”，用來管理項目中需要跨頁共享反復調(diào)用的狀態(tài)(狀態(tài)你可以理解成就是數(shù)據(jù)、變量、方法)。

vuex的存放倉庫為Store，內(nèi)部結(jié)構(gòu)可分五大塊：