Javascript Vue/Vuex-如何从孙辈检索数据

第一次从VueJs开始 昨天和现在我都被卡住了

我有一个父组件，它的子项中也有一个子项（我称之为孙子）。我想在单击父节点中的按钮时从所有孙子节点获取数据，但我不知道如何获取数据

在我看来，我想从父母那里调用一个事件，通知所有的孙子孙女，让他们将数据存储到vuex store。这是可能的，还是有别的方法

// Data
blocks = [
    {
        id: 1,
        type: 'HeadingBlock',
        title: 'Hello',
        color: 'blue'
    },
    {
        id: 2,
        type: 'ImageBlock',
        image_id: 2
    }
];


// App.js

<ContentBlocks :blocks="blocks" / >

// ContentBlock.vue

<ContentBlockItem v-for="(block, index) in blocks" :component="block.type" ... />

// ContentBlockItem.vue

<component :is="component" :block="block" /> // Grandchild

// component aka the grandchild (eg. HeadingBlock.vue)

data() {
  return {
    title: 'Hello - I want save the changed data for this heading',
    color: 'blue'
  }
}

//数据
区块=[
{
id:1，
类型：'HeadingBlock'，
标题：“你好”，
颜色：“蓝色”
},
{
id:2，
类型：“ImageBlock”，
图像编号：2
}
];
//App.js
//ContentBlock.vue
//ContentBlockItem.vue
//孙子
//子组件（例如HeadingBlock.vue）
数据（）{
返回{
标题：“您好-我想保存此标题的更改数据”，
颜色：“蓝色”
}
}

因此，只有“保存”按钮才能在父级中调用操作。我希望孙辈们尽可能少地使用逻辑（以便于创建新的逻辑，如“段落块”）

---

Thx提前

可以发出一个所有组件都订阅的全局

事件

，但是这似乎不太实际。（例如父级中的

this.$root.emit（'saveData'）

；要侦听它的所有子级中：

this.$root.on（'saveData'）

）

一种更实用的方法是首先将所有组件数据存储在

存储

中。并让每个组件从存储中检索其状态。（例如，在计算属性中：

title（）{返回此值。$store.myComponent.title}

---

这里的诀窍显然是正确设置所有存储数据（例如，使用组件正确匹配）。要做到这一点，您需要知道vuex不支持

映射

或

集合

。此外，您必须单独设置每个属性/元素-您不能一次性设置嵌套结构，而必须递归设置。因此

数组

必须使用本机数组方法（

push（），splice（）

）和

Object

属性必须使用

Vue.set（对象、键、值）进行设置

要在父组件和子组件之间访问数据，您可以使用vue的最佳功能之一是vuex store。当您希望将数据传递给子组件并更新子组件中的数据，然后在不使用道具和事件发射的情况下再次传递回父组件时，它非常有用

这是一个链接，您可以为您的web应用程序遵循

---

我希望这将对您有所帮助。

在这种情况下，您可以调用一个操作来存储和执行任务，并与所有组件（父组件+子组件+子组件+子组件）共享状态。我建议您阅读vuex。vuex是专为解决此类问题而设计的。