Question

在 VueJs 中将数据从子组件传递到父组件

2021-11-16

3710

vue.js vuejs2 vue-component

我有一个按钮组件，它调用一个 API，我想将返回的响应推送到父级，在那里它将成为 'translatedText' 属性，但是，我认为我错误地使用了 $emit，因为错误：`Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$emit'). How do I best capture the response data and pass it to my parent prop, and is using $emit for this instance?

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()" />

Answer 1

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

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

比

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

Answer 2

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

例如

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

Answer 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)
  },
}