第Vue如何解決兄弟組件之間傳值問題目錄解決兄弟組件之間傳值問題bus可以通過兩種方式來實現(xiàn)各類組件間傳值方法(父子、兄弟、頁級)父子關(guān)系組件兄弟關(guān)系組件頁級關(guān)系組件

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

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

有的同學(xué)會立馬想到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

importVuefrom'vue';

exportdefaultnewVue();

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

//在vue組件中引入

importbusfrom"../../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命名千萬別重復(fù)，否則其他組件會出現(xiàn)無故上車的情況，這個bus中可以給無數(shù)個組件使用，但是命名不能重復(fù)，除非你創(chuàng)建多個bus。

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

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

//這個組件需要上車，我們先設(shè)立一個車站

importbusfrom"../../utils/bus";

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

created(){

bus.$on('name',(data)={

console.log(data,'上車成功');

})

},

//打卡

beforeDestroy(){

bus.$off('name');

},

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

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

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

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

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

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

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

constbus=newVue()

Vtotype.$bus=bus;

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

created(){

this.$bus.$on('name',(data)={

console.log(data,'上車成功');

})

},

//打卡

beforeDestroy(){

this.$bus.$off('name');

},

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

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

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

父子關(guān)系組件

-父向子組件傳值

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

父組件代碼：

template

div

HelloWorld:newMsg="msg"/

//綁定子組件newMsg(props值)=父組件msg(data值)

/div

/template

script

importHelloWorldfrom"@/components/HelloWorld.vue";

exportdefault{

name:"Home",

data(){

return{msg:'WelcometoVue.js'}//父組件數(shù)據(jù)msg

components:{HelloWorld}

/script

子組件代碼：

template

div

h1{{newMsg}}/h1

//直接調(diào)用newMsg，顯示“WelcometoVue.js”

/div

/template

script

exportdefault{

name:"HelloWorld",

props:{newMsg:String}

//為子組件定義newMsg(props值)接收父組件msg

//或者props:['newMsg']

/script

-子向父組件傳值

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

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

子組件代碼：

script

exportdefault{

name:"HelloWorld",

data(){

return{msg:"WelcometoVue"}//data值，即將向上傳遞的值

created(){

this.$emit('change',this.msg)//向上傳遞自定義事件change和data值。這里我調(diào)用created生命周期函數(shù)觸發(fā)$emit()

/script

父組件代碼：

template

div

HelloWorld@change="handle"http:///監(jiān)聽到子組件傳遞來的事件并響應(yīng)handle方法

span{{newMsg}}/span

//直接調(diào)用newMsg，顯示“WelcometoVue”

/div

/template

script

importHelloWorldfrom"@/components/HelloWorld.vue";

exportdefault{

name:"Home",

data(){

return{newMsg:""}

methods:{

handle(msg){

//定義handle方法，將自動接收到的msg值給了自己的newMsg

this.newMsg=msg

}

components:{HelloWorld}

/script

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

子組件代碼：

script

exportdefault{

name:"HelloWorld",

data(){

return{msg:"WelcometoVue"}

//即將向父傳遞的data值

/script

父組件代碼：

template

div

HelloWorldref="son"/

//在子組件上定義一個ref名為"son"

/div

/template

script

importHelloWorldfrom"@/components/HelloWorld.vue";

exportdefault{

name:"Home",

mounted(){

console.log(this.$refs.son.msg)

//獲取到ref名為"son"的子組件內(nèi)msg數(shù)據(jù)，在控制臺顯示“WelcometoVue”

components:{HelloWorld}

/script

兄弟關(guān)系組件

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

組件A代碼：

template

divclickme/div

/template

script

exportdefault{

name:"HelloWorld",

data(){

return{helloMsg:"WelcometoVue"}//即將傳送的數(shù)據(jù)helloMsg

/script

組件B代碼：

template

div

{{hiMsg}}

//直接調(diào)用hiMsg，顯示“WelcometoVue”

/div

/template

script

exportdefault{

name:"Hi",

props:{hiMsg:String}//用來接收父組件傳值的props屬性hiMsg

/script

父組件代碼：

template

div

HelloWorldref="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

importHelloWorldfrom"@/components/HelloWorld.vue";

importHifrom"@/components/Hi.vue";

exportdefault{

name:"Home",

data(){

return{msg:""}

methods:{

change(){

returnthis.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)管理倉庫，用來管理項目中需要跨頁共享反復(fù)調(diào)用的狀態(tài)(狀態(tài)你可