0

有没有办法让同一个单文件组件的多个实例共享数据而不用总线或事件传递它？
我的意思是，除了为data这个目的而唯一声明为函数的 sectione 之外，实际上每个其他部分都是在 istances 之间共享的，对吧？

我想要的是staticPHP 或 C 类的变量。

我的具体用例

我有一个基于 vue 库中的组件（来自 Element UI 的 Carousel）的单个文件组件，需要将其高度定义为 a prop，但是我的包装器组件的每个实例都有不同高度的不同内容。
我想做的是让每个实例检查其内容高度，找到最大值并设置包装轮播的高度。
为此，我可以按类检索 dom 元素并使用 js 检查最大高度，但我需要确保每个实例只检索其自己的内容，而不是其他的，所以我希望有一些像共享的想法计数器并让每个实例在其方法中增加此计数器，created并使用它来生成自己的 id。

这可能吗？
如果没有，还有其他方法吗？我想避免为此目的为每个实例传递一个道具。

4

2 回答 2

1

答案 1

使用 Vuex https://vuex.vuejs.org/这是官方的 Vue 状态管理包。

答案 2

自己创建一个简化版本，如下所示：

import Vue from 'vue';

Vue.prototype.$state = {
    shared_variable: false,
    some_counter: 15
};

Vue.mixin({
    data() {
        return {
            $state: Vue.prototype.$state
        }
    }
});

window.Vue = new Vue({
    ...
});

然后，您可以简单地this.$state在您的组件中引用。

如果您想查看这些状态变量中的任何一个，您可以这样做：

// Some component.
export default {
    ...
    watch: {
        '$state.shared_variable': function(newVal, oldVal) {
            // Do stuff on change.
        }
    }
}

这个例子可能会被简化，但这就是我长期使用它的方式。

于 2020-03-27T11:08:27.230 回答
0

回答我的具体用例

不了解 vue $el：这为我提供了组件实例的特定根 dom 元素，因此无需使用共享数据以编程方式生成不同的 id。

然而，他没有回答关于在组件实例之间共享数据的原始问题。

于 2020-03-27T09:38:04.820 回答