vue.js 兄弟元件傳值
阿新 • • 發佈:2018-12-26
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裡面的值了。