在 VueJs 中将数据从子组件传递给父组件答案

【问题标题】：Passing data from a Child Component to the Parents Pop in VueJs在 VueJs 中将数据从子组件传递给父组件
【发布时间】：2021-12-27 16:26:09
【问题描述】：

我有一个调用 API 的按钮组件，我想将返回的响应推送到父级，在那里它将成为“translatedText”道具，但是，我相信我错误地使用了 $emit，因为到错误：`Uncaught（in promise）TypeError：无法读取未定义的属性（读取'$emit'）。如何最好地捕获响应数据并将其传递给我的父道具，并且在这种情况下使用 $emit 最好？

TranslationButton.vue

    <template>
  <b-button type="is-primary" @click="loadTranslations()">Übersetzen</b-button>
</template>

<script>
export default {
  name: "TranslationButton",

  props: {
   translatedText: ''
  },

  methods: {
     loadTranslations() { 
      fetch('http://localhost:3000/ccenter/cc_apis')
        .then(function(response) {
          return response.text();
        })
        .then(function(data) {
          console.log(data);
          this.$emit('translatedText', this.data);
          console.log(data)
        })
      },
  },
};
</script>

父组件道具：

 props: {
    data: Array,
    translatedText: '',
    showAttachments: {
      type: Boolean,
      default: false,
    }

  },

父组件中如何调用子组件：

  <translation-button  @translatedText="loadTranslations()" />

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

by 将值传递给父组件， @translatedText="loadTranslations()" - 它的事件监听器，触发你的子组件发射

使用@translatedText="loadTranslations" 而不是@translatedText="loadTranslations()"

并将此 loadTranslations 作为方法添加到父组件

顺便说一句

如果你不使用箭头函数，而你使用 this.data 它指向传递给的对象。那么，我猜它将是未定义的......

【讨论】：

感谢您的回答，但我不确定我是否遵循，您将如何构建 loadTranslations() 方法？

【解决方案2】：

将数据从子级传递给父级时的最佳做法是发出事件。

this.$root.$emit('translatedText', this.data);

比

this.$root.$on('translatedText', () => { // do stuff })

【讨论】：

感谢您的回答，您能告诉我如何将其应用于我的示例吗？我已尝试实施并在 Emit Event 上收到未定义的错误。
在子组件的挂载钩子中使用 $emit，而不是在父组件的挂载钩子中使用 $on。

【解决方案3】：

如果你想将数据从孩子传递给父母，你需要像下面的代码一样使用 $emit

孩子：

    <template>
      <b-button type="is-primary" @click="loadTranslations">Übersetzen</b-button>
    </template>
    
<script>
export default {
  name: "TranslationButton",

  props: {
    TranslatedText: ''
  },

  methods: {
     loadTranslations() {
      const self= this; // change added
      fetch('http://localhost:3000/ccenter/cc_apis')
        .then(function(response) {
          return response.text();
        })
        .then(function(data) {
          console.log(data);
          self.$emit('changeTitle', data) // change added
      })
  }
}
     
</script>

父母：

<template>
 <translation-button @changeTitle="ChangeT" />
</template>
......
methods:{
 ChangeT(title)
  {
   console.log(title)
  },
}

【讨论】：

感谢您的回答，但标题返回未定义
在发射之前尝试检查有效载荷是否包含任何值？
我还添加了一些更改以避免this 问题
@Amarockz 有效载荷在发出之前是未定义的，我以为有效载荷是“数据”？这不是未定义的。
删除了 .finally 块。检查编辑的答案

【解决方案4】：

问题在于this 的使用。它不再指向您在 promise then() 方法中的组件。您应该创建一个新变量并使用 this 的值对其进行初始化，然后使用该变量来发出事件。

例如

loadTranslations() {
  const _this = this;
  fetch().then(response => _this.$emit(response));
}

【讨论】：