Javascript 如何在vuejs中将值从子组件发射到父组件中的对象？

我正在尝试使用具有自定义表单输入的子组件&将这些值发送到父组件。然而，当我试图将值存储在父组件的对象中时，当输入另一个输入值时，一个输入值消失。让我展示一些代码：

子组件

导出默认值{
方法：{
设置字段（值，字段）{
此.$emit（“输入”{
标题：字段==“标题”&&value，
内容：字段==“内容”&&value，
});
},
},
}

父组件

导出默认值{
数据（）{
返回{
blogPost:{}，
};
},
观察：{
博客邮报（val）{
控制台日志（val）；
},
},
};

在这里，当我尝试输入“内容”时，“标题”字段变为false。那个么，如何在子组件上设置条件，因为我可以向父组件发出两个输入？或者有其他想法来完成同样的任务

---

代码沙盒链接：

您可以使用三元运算符：

this.$emit（“输入”{
标题：字段==“标题”？值：“”，
内容：字段==“内容”？值：“”，
});

根据

&&

运算符实际返回指定操作数之一的值

常数a=3；
常数b=-2；
console.log（a>0&&b>0）；//它返回false作为表达式'a>0'true，而b>0返回'false'。

为什么我们不在子组件中使用这个.value？ 在代码中，父组件将v-model=“blogPost”传递到子组件中，但传递到未使用的子组件中

试试这个

在子组件中：

导出默认值{
道具：{
价值：{
类型：项目
}
},
方法：{
设置字段（值，字段）{
此.$emit（“输入”{
标题：字段==“标题”？值：this.value.title，
内容：字段==“内容”？值：this.value.content，
});
},
},
}

<template>
   <input
      type="text"
      @input="setField($event.target.value, 'title')"
   />
   <wysiwyg-input
      @change="(text) => setField(text, 'content')"
   />
</template>

<script>
export default {
methods: {
    setField(value, field) {
      this.$emit("input", {
        title: field === "title" && value,
        content: field === "content" && value,
      });
    },
  },
}
</script>

<template>
  <FormFields v-model="blogPost" />
</template>

<script>

export default {
  data() {
    return {
      blogPost: {},
    };
  },
  watch: {
    blogPost(val) {
      console.log(val);
    },
  },
};
</script>

expr1 && expr2

If expr1 can be converted to true, returns expr2; else, returns expr1