如何更改 VueJS 上的另一個組件數據

Question

我有一個像這樣的經典 Vue 組件

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

而且我也有這樣的 Vue 實例。

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

添加功能工作時，我必須添加數據組件塊值。 我不能使用 Vuex，其他解決方案是什么？

Answer 1

您可以使用稱為“事件總線”的方式

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

或者您可以創建自己的狀態管理

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

但我強烈建議你也使用 vuex，因為隨着項目的增長，管理事件和狀態會變得很困難

Answer 2

由於這是一個父 -> 子通信，您可以非常簡單地使用道具：

• 在父組件上存儲blocks 。
• 將blocks作為道具傳遞給bar組件。
• 使用計算屬性進行任何其他處理。
• 使用孩子的模板顯示數據。

這里有一些指導：

1. 用 props 定義你的組件：

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

2. 在父級上定義blocks （在您的示例中，主 vue 組件）：

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

3. 將數據向下傳遞給組件：

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