下载tiny-emitter
npm i tiny- emitter
创建utils文件夹中bus.js
import emitter from "tiny-emitter/instance" ;
export default {
$on: ( . . . args) = > emitter. on ( . . . args) ,
$once: ( . . . args) = > emitter. once ( . . . args) ,
$off: ( . . . args) = > emitter. off ( . . . args) ,
$emit: ( . . . args) = > emitter. emit ( . . . args) ,
} ;
main.js里面导入注册
import { createApp } from "vue" ;
import App from "./App.vue" ;
import $bus from "./utils/bus" ;
let app = createApp ( App ) ;
app. config. globalProperties. $bus = $bus;
app. mount ( "#app" ) ;
兄弟组件中使用
< script>
export default {
data ( ) {
return {
song: "我是兄弟组建的数据" ,
} ;
} ,
methods: {
handleBro ( ) {
this . $bus. $emit ( "getBro" , this . song) ;
} ,
} ,
} ;
< / script>
< script>
export default {
data ( ) {
return { } ;
} ,
mounted ( ) {
this . $bus. $on ( "getBro" , ( input) = > {
console. log ( input) ;
} ) ;
} ,
} ;
< / script>