Question

大家好，我从事vue项目，但有一个我无法解决的问题。

问题：

我使用在main.js中定义的总线在组件之间传输数据，并尝试将它们捕获到目标组件中。

目标组件如下所示：

<template>
    <div class="container is-fluid">
        <section class="hero is-dark">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title">
                        {{itemTitle}}
                    </h1>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    import { bus } from '../main'

    export default {
        data: function () {
            return {
            itemSummery: [],
            itemTitle: 'o',
            item: null
            }
        },
        created () {
            bus.$on('PostInfo', data => {
                this.itemTitle = data.title
                console.log(data)
            })
        },
        methods: {
            changeValue: function (data) {
                this.itemTitle = data.title
                console.log(this.itemTitle)
            }
        }
    }
</script>

我可以在控制台中显示数据，但是当我以创建的方法将它们分配给itemTitle时，我的数据完全不变，并且itemTitle在页面上显示'o'。任何人都可以帮助我避免此问题，并为项目分配数据吗？

感谢和抱歉，我的英语^^

Answer 1

尝试在其中更改代码：

created() {
    var instance = this;
    this.$bus.$on('PostInfo', function (res) {
        console.log(res);
        instance.item = res;
        instance.itemTitle = res.title;
    });
}

问题应该出在函数内部this不是组件的实例。

Answer 2

好吧，我终于找到了解决方案。我忘了总线元素传递数据，我开始像这样使用vuex存储：

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    data: null
  }
})

在文件中我想发送数据，我这样做：

 goRetro: function (item) {
      this.$store.replaceState(item)
 }

最后，我要在目标组件中捕获数据：

 created () {
    var dataValue = this.$store.state
    this.itemTitle = dataValue.title
 }

official repo notification on obsolete parameters

我希望它可以帮助人们

将我的数据显示在公共汽车上

2 个答案: