javascript - vue2.0兄弟组件通信，数据传递成功了，但是无法改变组件的数据

问题描述

问 题

新手练手做的小项目，比较简单,没用vuex，而是用的官方文档这种方法。
data.title = 'ccc' 控制台里可以看到已经传过来了，qnss的长度也变成了3。
但是渲染出来仍然只有两项，vue-devtool里也显示只有两项。

我试了下好像写在$on回调函数里的语句没法改变这个组件的数据，在后面console.log(this.qnss)仍然是2个元素。但是this指向没有问题，不知道问题出在哪。写在外面又没法获取data。

章鱼喵地址https://github.com/win5do/IFE...

一脸懵逼求解答！大神不要一上来就叫我用vuex，碰到小坑填平嘛，别老是想着绕路= 。=

组件list里的代码:

<script>
  import bus from '../main';

  export default {
    name: 'list',
    data() {
      return {
        msg: {},
        qnss: [
          {
            title: 'aaa',
            deadline: '1900',
            status: 'dead',
            qns: [],
          },
          {
            title: 'bbb',
            deadline: '1991',
            status: 'alive',
            qns: [],
          },
        ],
      };
    },
     created() {
      bus.$on('save', (data) => {
        this.qnss.push(data);
        console.log(data.title, this.qnss);
      });
      console.log(this.qnss);
    },
  };

</script>

解决方案

VUE-BUS我还没用过，不过看机制的话应该是一种异步回调，created是初始渲染时的钩子，只执行一次，需要需要配合异步的话可以用
1.setTimeOut(function(){console.log(this.qnss)},1)
2.使用mounted钩子，这个是双向绑定的。

这篇关于javascript - vue2.0兄弟组件通信，数据传递成功了，但是无法改变组件的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！