Soy consciente de que hay muchas preguntas sobre el paso entre componentes secundarios y principales; sin embargo, todas las preguntas y guías que he visto usan una entrada de formulario para mostrar cómo funciona la función $emit, y no he tenido éxito en traducir esto a el resultado de una llamada API.
Mi pregunta es, ¿cómo refactorizo este código para pasar los 'datos' hacia arriba a mis componentes principales 'TranslatedText' Prop? Me confunde porque no tengo entrada, solo la respuesta de datos. Cualquier consejo apreciado.
ParentComponent.vue
<template> <translation-button v-model="translatedText" /> </template> props: { translatedText: '', },ChildComponent.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); }) .finally(() => { this.$emit('loadTranslations', this.TranslatedText); console.log('event is a success'); }); } } } </script>Hay varias formas de comunicarse entre padres e hijos. si desea pasar datos de niño a padre, debe usar $emit como el siguiente código
niño:
<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); }) .finally((payload) => { // change added this.$emit('changeTitle','payload ') // change added console.log('event is a success'); }); } } } </script>padre:
<template> <translation-button @changeTitle="ChangeT" /> </template> methods:{ ChangeT(title) { console.log(title) }, }esta página es un ejemplo simple relacionado con su problema