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/event.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裡面的值了。