vue中使用bus 实现子组件之间通讯，获取不到值的情况

最新推荐文章于 2024-05-09 11:25:01 发布

qq_51538602

最新推荐文章于 2024-05-09 11:25:01 发布

阅读量1k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51538602/article/details/126035800

版权

vue 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

在main.js 文件中 Vue.prototype.$bus = new Vue();

再在子组件1中

子组件1：

mounted() {
    // 事件监听 并给Bus实例初始化一个属性
    this.$bus.$on("bustab1", (args) => {
      this.$bus.bustab1 = args;
    });
},

methods:{
    handlExaminat(index, row) {
      console.log(index, "index");
      console.log(row, "rows");

      this.$bus.$emit("bustab1", row.tids); //传给子组件2 的数据
    },
}

子组件2：

mounted() {
    // console.log(this.$bus, "看看");
    // this.$bus.$on("bustab", (data) => {
    //   this.ids = data;
    //   console.log(data, "data");
    // });
    // console.log(this.ids, " this.ids");
//上面的方法拿不到数据的情况下   用下面的方法

    this.ids = this.$bus.bustab1; //子组件1里面初始化的值
    console.log(this.$bus.bustab1, "看看子组件");
},