如何在父页面上将道具从一个子组件动态传递到另一个子组件

Question

我有两个子组件，必须动态地将道具从第一个子组件传递给父组件，从父组件传递给第二个子组件。

父级

<script>
data: () => ({
model: {}
}),
methods: {
changeData(payload) {
this.model.personalData = {...payload}
}  
}
</script>
<template>
<first-child @changeData="(payload) => changeData(payload)"/>
<second-child :enter-object="model" />
</template>

子级

<script>
data: () => ({
model: {}
}),
methods: {
changeData() {
this.$emit("changeData", this.model);
}
}
</script>
<template>
<v-text-field v-model="model.name" @input="changeData()">
<v-text-field v-model="model.email" @input="changeData()">
</template>

子二

<script>
props: {
enterObject: {
type: Object,
required: false,
default: () => ({})
}
},
data: () => ({
model: {}
}),
watch: {
enterObject: {
immediate: true,
handler() {
Object.assign(this.model.personalData, this.enterObject.personalData);
}
}
</script>
<template>
<div>
<div v-if="model.personalData.name || model.personalData.email">
<span class="mr-3">{{ model.personalData.name }}</span>
<span>{{ model.personalData.email }}</span>
</div>
<div v-else>
No data
</div>
</div>
</template>

我在父组件中毫无问题地获得数据，但这些数据不会传递给第二个孩子，这就是为什么我总是"；没有数据"？

Answer 1

我测试了您的代码，发现了一些东西：

您需要创建"；personalData"；在模型内部；childTwo"；。

<template>
<div>
// I changed the validation for personalData
<div v-if="model.personalData">
<span class="mr-3">{{ model.personalData.name }}</span>
<span>{{ model.personalData.email }}</span>
</div>
<div v-else>No data</div>
</div>
</template>
export default {
props: {
enterObject: {
type: Object,
required: false,
default: () => ({})
}
},
data: () => ({
model: {
personalData: {}
}
}),
watch: {
enterObject: {
deep: true,
handler() {
// Add a validation in the handler, you can use Object assign inside the validation.
if(this.enterObject) {
Object.assign(this.model.personalData, this.enterObject.personalData)
}
}
}
}

它对我很有效。我希望它能帮助你。

Answer 2

您必须使用它来分配对象的值$设置更多关于物体反应性的信息点击这里

您的父组件应该是这样的：-

这是的工作示例

<template>
<div>
<first-child @change-data="(payload) => changeData(payload)" />
<second-child :enter-object="model" />
</div>
</template>
<script>
import FirstChild from "./FirstChild";
import SecondChild from "./SecondChild";
export default {
data: () => ({
model: {},
compKey: 0,
}),
components: {
FirstChild,
SecondChild,
},
methods: {
changeData(payload) {
this.$set(this.model, "test", payload);
//this.model.test = payload;
},
},
};
</script>