如何从 Vue.js 中深度嵌套的子组件访问数据答案

【问题标题】：How to access data from deeply nested child components in Vue.js如何从 Vue.js 中深度嵌套的子组件访问数据
【发布时间】：2016-04-08 12:32:28
【问题描述】：

我正在使用 Vue.js 构建一个界面。我有一个表格，这个表格包含一个地址和其他一些杂项数据。所以我在 Vue 中创建了两个组件，UserData 和 UserAddress。 UserData 包含 UserAddress 的一个实例作为子组件。我想根据页面专门针对表单的“提交”按钮的行为，因此这些组件不包含提交按钮——代表页面的外部组件（UserPage）包含提交按钮，并且只包含UserData 模板。

所以层次结构是，UserPage => UserData => UserAddress。

现在我需要在UserPage 的某个方法中获取所有表单数据。我只想说我需要在提交处理程序中获取它，但我能想到的唯一方法是在不直接访问子组件的数据的情况下做到这一点：

使用$broadcast 从提交处理程序向下传播事件e1
在UserAddress 中监听e1 事件
使用$dispatch发送事件e2并将地址数据与消息捆绑
在UserData 中监听e2，将其他表单数据添加到消息中，并传播或重新调度事件
在UserPage 中收听e2 并在那里找到完整的聚合数据。

这是处理这种情况的正常方法吗？这似乎有点矫枉过正，但手册明确不推荐访问子 $data。

【问题讨论】：

后来我意识到处理这个问题很疯狂。每当你想这样做时，这表明你应该使用 Vuex。另外，在 Vue 2.0 中事件已经消失，所以不要依赖它们。
事件没有在2中消失，你只需要使用集线器而不是广播和调度
没有消失，但在迁移指南中标记为已弃用。我尝试了集线器模式，但它很快就失控了。 Vuex 要好得多。

标签： javascript vue.js

【解决方案1】：

使用twoWay 道具。如果在子属性中声明twoWay: true，并从父属性传递一个变量，如:child-prop.sync="parent-data"，则属性的值将写入父属性。你可以用这个做一个链子。代码是这样的

孩子

<template>
  <input v-model="address">
</template>
<script>
export default {
  props: {
    address: {
      type: String,
      twoWay: true
    }
  }
}
</script>

父母

<template>
  <div>
    <input v-model="uname">
    <user-address :address.sync="uaddress"></user-address>
  </div>
</template>
<script>
export default () {
  components: {
    'user-address': userAddress
  },
  props: {
    uaddress: {
        type: String,
      twoWay: true
    },
    uname: {
        type: String,
      twoWay: true
    }
  }
}
</script>

检查this fiddle 与链userPage => userData => userAddress

【讨论】：