Vue.js 在脚本的导出部分和非导出部分之间传递值

如何在脚本的导出部分和非导出部分之间传递值

结构如下所示：

<script>
// PART 1:
import { EventBus } from './event-bus.js';

EventBus.$on('value-received', value => {
    this.receivedValue = value;
});

// PART 2:
export default {
    data() {
        return {
            receivedValue: ''
        }
    },
    watch: {...},
    methods: {...}
}
</script>

如何获取分配给receivedValue变量并由Vue方法使用的值？

因为您的EventBus.$on调用使用了一个箭头函数，它引用的this在EventBus调用时是this的作用域

如果您同意事件的所有实例具有相同的receivedValue，则可以将接收到的值重定向到文件范围内的对象：

var shared = { receivedValue: '' };
EventBus.$on('value-received', value => {
    shared.receivedValue = value;
});

export default {
    data() { return shared; }
    watch: ...,
    methods: ....
}

Vue.js将注册一个处理程序，以便对您返回的对象（即共享对象）的更改作出反应

如果出于某种原因，希望组件的每个实例都有一个单独的事件流，则需要在数据函数中创建一个新对象，并让事件总线直接更新新对象