问题描述
限时送ChatGPT账号..我正在使用 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"
,则财产写在父母身上.你可以用这个做一个链子.代码应该是这样的
孩子
<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:
$broadcast
to propagate an event e1
downwards from the submit handler
Listen for the e1
event in UserAddress
Use $dispatch
to send an event e2
and bundle the address data with the message
Listen for e2
in UserData
, add the other form data to the message, and propagate or re-dispatch the event
Listen for e2
in UserPage
and 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屋!
更多推荐
[db:关键词]
发布评论