如何从 Vue.js 中深层嵌套的子组件访问数据 [英] How to access data from deeply nested child components in Vue.js
问题描述
我正在使用 Vue.js 构建一个界面.我有一个表格，这个表格包含一个地址和其他一些杂项数据.所以我在 Vue 中创建了两个组件，UserData 和 UserAddress.UserData 包含一个 UserAddress 的实例作为子组件.我想根据页面专门针对表单的提交"按钮的行为，因此这些组件不包含提交按钮——代表页面的外部组件 (UserPage) 包含提交按钮，只包含 UserData 模板.
所以层次结构是，UserPage => UserData => UserAddress.
现在我需要在 UserPage 上的某个方法中获取所有表单数据.我只想说我需要在提交处理程序中获取它，但我能想到的唯一方法是在不直接访问子组件的数据的情况下执行以下操作:
- 使用
$broadcast从提交处理程序向下传播事件e1 - 监听
UserAddress 中的 - 使用
$dispatch发送一个事件e2并将地址数据与消息捆绑 - 在
UserData中监听e2，将其他表单数据添加到消息中，并传播或重新调度事件 - 在
UserPage中监听e2并在那里找到完整的聚合数据.
e1 事件这是处理这种情况的正常方法吗?这似乎有点矫枉过正，但手册明确不推荐访问子$data.
使用 twoWay 道具.如果您在子属性中声明 twoWay: true，并从父级传递一个变量，如 :child-prop.sync="parent-data"，则财产写在父母身上.你可以用这个做一个链子.代码应该是这样的
孩子
<input v-model="地址"></模板><脚本>导出默认{道具: {地址: {类型:字符串，双向:真}}}父
<div><input v-model="uname"><用户地址:address.sync="uaddress"></user-address></模板><脚本>出口默认(){成分: {'用户地址':用户地址},道具: {网址:{类型:字符串，双向:真},姓名:{类型:字符串，双向:真}}}
检查这个小提琴与链userPage => userData => userAddress
I am building an interface using Vue.js. I have a form, this form contains an address, and other bits of miscellaneous data. So I created two components in Vue, UserData and UserAddress. UserData contains an instance of UserAddress as a child component. I want to specialize the behaviour of the "Submit" button for the form depending on the page, so these components don't contain the submit button -- the outer component, representing the page (UserPage) contains the submit button, and just includes the UserData template.
So the hierarchy goes, UserPage => UserData => UserAddress.
Now I need to get ALL the form data within some method on UserPage. I would just say that I need to get it within the submit handler, but the only way that I can think to do this without directly accessing the data of the child components is the following:
- Use
$broadcastto propagate an evente1downwards from the submit handler - Listen for the
e1event inUserAddress - Use
$dispatchto send an evente2and bundle the address data with the message - Listen for
e2inUserData, add the other form data to the message, and propagate or re-dispatch the event - Listen for
e2inUserPageand find the full aggregated data there.
Is this a normal method for dealing with a situation like this? It seems like overkill, but accessing child $data is explicitly non-recommended by the manual.
Use twoWay props. If you declare twoWay: true in a child property, and pass a variable from the parent like :child-prop.sync="parent-data", then the value of the property is written on the parent. You can make a chain with this. The code would be like this
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 this fiddle with the chain userPage => userData => userAddress
这篇关于如何从 Vue.js 中深层嵌套的子组件访问数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
