如何在 vuejs 中从子组件向父组件中的对象发出值？答案

【问题标题】：How to Emit values from child to an object in parent component in vuejs?如何在 vuejs 中从子组件向父组件中的对象发出值？
【发布时间】：2021-04-10 09:23:52
【问题描述】：

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

子组件

<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>

在这里，当我尝试输入“内容”时，“标题”字段变为假。那么如何在子组件上设置条件，因为我可以将两个输入都发送到父组件？还是有其他想法来完成相同的任务？

代码沙盒链接： https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/App.vue

【问题讨论】：

vuejs.org/v2/guide/components.html#Using-v-model-on-Components

标签： javascript vue.js vuejs2

【解决方案1】：

你可以使用三元运算符：

this.$emit("input", {
   title: field === "title" ? value : "",
   content: field === "content" ? value : "",
});

【讨论】：

【解决方案2】：

根据MDN docs

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

expr1 && expr2

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

const a = 3;
const b = -2;

console.log(a > 0 && b > 0); // which returns false as expression `a > 0` true and b > 0 is `false` returned.

你的情况

如果归档 = 'title'，field === "title" && value 将返回 value

如果归档 = 'somethingelse'，field === "title" && value 将返回 false。

正如 Serg 所说，您可以使用三元运算符来解决您的问题。

this.$emit("input", {
   title: field === "title" ? value : "",
   content: field === "content" ? value : "",
});

【讨论】：

【解决方案3】：

真棒问题

为什么我们不在子组件中使用 this.value 呢？在您的代码中，父组件将 v-model="blogPost" 传递给子组件，但在未使用的子组件中。

试试这个

在子组件中：

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

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

【讨论】：