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

Question

I have a classic Vue Component like this

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

And also i have Vue Instance like this.

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

When add function work, i have to add to data component blocks value. I can't use Vuex and what is this other solutions?

Answer 1

You can use the way which called “Event bus”

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

Or you can create your own state management

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

But i highly recommend you too use vuex, since it will become hard to manage events and state when the project grows

Answer 2

Since this is a parent -> child communication, you can very simply use props:

• Store blocks on the parent component.
• Pass blocks as a prop to bar component.
• Do any additional processing using computed properties.
• Display data using child's template.

Here's some guiding:

1. Define your component with props:

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

2. Define blocks on the parent (in your example, the main vue component):

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

3. Pass data down to the component:

    <bar :blocks="blocks"></bar>