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

Question

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

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

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

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

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

Answer 1

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

检查 this fiddle使用链 userPage => userData => userAddress