[英]How to pass multiple input values from CHILD Component to Parent component in Vue?
** 任何人都知道如何传递多个子组件。 输入值**
<template>
<div>
<v-row align="center">
<v-select
:items="languages"
v-model="selectedOption"
@input="changeLanguage()"
outlined
solo
class="m-3"
cols="12"
sm="2"
label="Select Language"
></v-select>
<v-combobox
@input-content="changeContent()"
v-model="contents2"
outlined
solo
class="d-inline-flex"
cols="12"
sm="2"
label="Input Content"
></v-combobox>
</v-row>
</div>
</template>
** 上面我的模板文件夹,请随时向我询问更多源代码 **
<Child
v-for="count in sec"
:key="count"
v-model="selectedLanguage"
:languages="languages"
:contents="contents"
:input="onChangeChild"
:inputContent="onChangeContent"
/>
** 这是我的父组件源代码 **
似乎您已经知道自己想要什么以及需要什么。 并拥有增强您解决问题方法的技能。
父属性可以用作更深层组件的 v-model。
如果您需要彻底管理某些值,您还可以将组件拆分为多个。 如果这不会花费您更多的测试或任何其他资源。
当您使用 emit 作为与父组件通信的通道时。 始终尝试记住,您发出的有效负载可以根据您的需要/需要进行扩展和设计。 例如:
this.emit("updateMultiple", {
var: complexObject
anotherVar: moreComplexObject
})
然后,您可以在将有效负载分解为您的任务需求的方法中以详细方式管理发射。
<input @updateMultiple="advancedFunction">
在方法:
advancedFunction(emitPayload) {
const inputOne = emitPayload.var
const inputTwo = emitPayload.anotherVar
//...further logic
},
最后,您可以根据要在子组件中触发它们的时间来管理发射。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.