我正在使用 Vue.js 构建一个界面。我有一个表格,这个表格包含一个地址和其他一些杂项数据。所以我在 Vue 中创建了两个组件,UserData
和 UserAddress
。 UserData
包含一个 UserAddress
的实例作为子组件。我想根据页面专门化表单的“提交”按钮的行为,因此这些组件不包含提交按钮——代表页面的外部组件 (UserPage
) 包含提交按钮,并且只包含 UserData
模板。
所以层次结构是这样的,UserPage
=> UserData
=> UserAddress
。
现在我需要在 UserPage
上的某个方法中获取所有表单数据。我只想说我需要在提交处理程序中获取它,但我认为在不直接访问子组件数据的情况下执行此操作的唯一方法如下:
- 使用
$broadcast
从提交处理程序向下传播事件e1
- 监听
UserAddress
中的e1
事件 - 使用
$dispatch
发送事件e2
并将地址数据与消息捆绑 - 监听
UserData
中的e2
,将其他表单数据添加到消息中,并传播或重新分发事件 - 在
UserPage
中监听e2
并在那里找到完整的聚合数据。
这是处理这种情况的正常方法吗?这似乎有点矫枉过正,但手册明确不建议访问子 $data
。
最佳答案
使用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
关于javascript - 如何从 Vue.js 中深度嵌套的子组件访问数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36499665/