1. 程式人生 > >vue.js 兄弟元件之間的值傳遞方法

vue.js 兄弟元件之間的值傳遞方法

1、兄弟之間傳遞資料需要藉助於事件車,通過事件車的方式傳遞資料

2、建立一個Vue的例項,讓各個兄弟共用同一個事件機制。

3、傳遞資料方,通過一個事件觸發bus.$emit(方法名,傳遞的資料)。

4、接收資料方,通過mounted(){}觸發bus.$on(方法名,function(接收資料的引數){用該元件的資料接收傳遞過來的資料}),此時函式中的this已經發生了改變,可以使用箭頭函式。

例項如下:

我們可以建立一個單獨的js檔案eventVue.js,內容如下

import Vue from 'vue';

export default new Vue();

假如父元件如下:

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

子元件a如下:

複製程式碼

<template>
      <div class="components-a">
           <button @click="abtn">A按鈕</button>
      </div>
</template>
<script>
import eventVue from '../../js/eventVue.js'
export default {
      name: 'app',
      data () {
        return {
                ‘msg':"我是元件A"
        }
      },
      methods:{
           abtn:function(){
                   eventVue.$emit("myFun",this.msg)   //$emit這個方法會觸發一個事件
           }
      }
}
</script>

複製程式碼

子元件b如下:

複製程式碼

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',
   data () {
        return {
           'btext':"我是B元件內容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn:function(){
            eventVue.$on("myFun",(message)=>{   //這裡最好用箭頭函式,不然this指向有問題
                 this.btext = message      
            })
       }
    }
}
</script>

複製程式碼

這樣在子元件a裡面點選函式就可以改變兄弟元件b裡面的值了,方法很棒棒。