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

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

所以层次结构是这样的，UserPage => UserData => UserAddress.

现在我需要在某种方法中获取所有表单数据UserPage。我只想说我需要在提交处理程序中获取它，但我认为在不直接访问子组件数据的情况下执行此操作的唯一方法如下：

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

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

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

child

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

parent

<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>

check 这把小提琴 https://jsfiddle.net/p01dunw8/2/与链条userPage => userData => userAddress