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

Question

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

所以层次结构变为UserPage =＆gt; UserData =＆gt; UserAddress。

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

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

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

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

使用链userPage =＆gt;检查this fiddle userData =＆gt; userAddress