兄弟组件通信传值

小橘子皮__兜兜

已于 2022-09-14 13:12:56 修改

阅读量199

点赞数

文章标签： javascript 前端开发语言

于 2022-08-02 16:23:23 首次发布

本文链接：https://blog.csdn.net/weixin_43657954/article/details/126124635

版权

任意组件通信

在main.js的Vue实例中添加beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线 }来实现任意组件间通信。

1.找到main.js文件

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this //安装全局事件总线
  }
}).$mount('#app')

2.传值的组件使用 this.$bus.$emit()

<template>
  <div>
    <button @click="passName">点我传名字</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: "张三"
        }
    },
methods: {
    passName() {
        this.$bus.$emit('passName', this.name) //事件名，要传的值
    }
}
}
</script>

3.接收值的组件使用 this.$bus.$on()

<template>
  <div>
    {{passName}}
  </div>
</template>

<script>
export default {
    data(){
        return {
            passName: ""
        }
    },
    mounted(){
        this.$bus.$on("passName",(data)=>{
            this.passName = data //data就是传过来的值
        })
    },
//销毁绑定到Vue实例上的事件
    beforeDestroy() {
        this.$bus.$off("passName")
    }

}
</script>