Question

我有一个像这样的经典Vue组件

Vue.component('bar', {
    template: `<div class="bar"></div>`,
    data () {
        return {
            blocks: [
            ]
        }
    }
});

我也有这样的Vue Instance。

new Vue ({
  el: '#app',
  data: {
    value: 1
  },
  methods: {
    add: function() {
        // here to do
    }
  }
});

当添加函数工作时，我必须添加数据组件块值。我无法使用Vuex以及其他解决方案是什么？

Answer 1

您可以使用称为“事件总线”的方式

https://alligator.io/vuejs/global-event-bus/

或者您可以创建自己的状态管理

https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

但我强烈建议你也使用vuex，因为当项目增长时，很难管理事件和状态

Answer 2

因为这是父母 - ＆gt;孩子沟通，你可以简单地使用props:

将blocks存储在父组件上。
将blocks作为道具传递给bar组件。
使用computed properties.
使用子模板显示数据。

以下是一些指导：

使用props定义组件：

Vue.component('bar', {
    template: `<div class="bar">{{blocks.length}}</div>`,
    props: ['blocks']
});

在父级上定义blocks（在您的示例中，主要的vue组件）：

new Vue ({
    el: '#app',
    data: {
        blocks: []
    },
    methods: {
        add: function() {
            // do something with blocks
        }
    }
});

将数据传递给组件：
```
<bar :blocks="blocks"></bar>
```

如何更改VueJS上的另一个组件数据

2 个答案: