Envoyer des données du composant au sous-composant dans la vue 3

Question

<p>J'essaie de le faire en envoyant des données de mon composant parent <code>formTelemarketing</code> à mon composant enfant <code>nAsignedCalls</code> ;code> Exécuter un accessoire dans props : { register: Number },</code> Lorsque je clique sur le bouton de soumission (pas sur le bouton de soumission), un formulaire doit être rempli, mon bouton d'action appelle la fonction <code>searchRegisters< /code> et récupérez la valeur du formulaire et utilisez $emit pour envoyer l'accessoire à mon composant</p> <pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre> <p>Dans le composant enfant contenu dans mon composant parent, j'ai : </p> <pre class="brush:php;toolbar:false;"><div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div></pré> <p>Dans mon composant enfant par défaut d'exportation, j'ai des accessoires :['register'] et dans ce composant de ma table, j'ai un for-each qui devrait obtenir toutes les données de cet accessoire...I Aucune erreur n'apparaît dans le console mais je n'arrive pas à afficher mes données</p> <pre class="brush:php;toolbar:false;">{{ (registre) : "vacio" }} <template v-for="élément de registre"> <tr> <td>{{ item.id }}</td> <td>{{ (nom.élément) ? nom.élément : '' }} </td></pre> <p>Par exemple, c'est ma structure, j'ai une condition pour savoir si l'inscription est remplie, renvoie toujours "vacio".</p> <p>Voici ma définition d'accessoires dans le composant enfant : </p> <pre class="brush:php;toolbar:false;">exporter la définitionComponent par défaut({ nom : 'nAsignedCalls', props :['registre'],</pre> <p>Mon API fonctionne bien, dans l'onglet réseau de la console, je peux afficher la réponse ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ code> j'ai plus de données...</p> <p>Je ne sais pas ce que je fais de mal, je suis nouveau sur vue...</p> <p>Merci pour votre avis et désolé pour mon mauvais anglais</p> <p><strong>Mise à jour</strong></p> <p>Tout d’abord, j’utilise l’API de composition dans mon projet. </p> <p>Maintenant, dans mon composant enfant, je définis mon événement</p> <pre class="brush:php;toolbar:false;">// événement personnalisé const émetMonEvent = (événement) => émettre('registres', événement); retour { retirer, ID de recherche, nom de recherche, rechercheTéléphone, modifier, Obtenir des résultats, obtenirPage, émettreMonÉvénement, obtenir un appel }</pré> <p>Dans mon app.js, j'ai redéfini app5 : </p> <pre class="brush:php;toolbar:false;">const app5 = createApp({ Composants:{ nAppelsAsignés }, installation() { const getCall = (event) => console.log('getCall(): ' + event.target.id); retourner { getCall } } }) app5.mount('#app5')</pre> <p>Mais lorsque je clique sur le bouton, je ne peux rien afficher sur le Web ou dans la console</p> <p><strong>Mon bouton : </strong></p> <pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Rechercher les registres" @click="searchRegisters() ">≪/pré> <p>Avec tout ce qui est scripté dans mon composant parent, je clique sur le bouton et j'appelle la fonction.</p> <p> <pre class="brush:php;toolbar:false;"><template> <div class="conteneur mt-3 bg-ombre blanche arrondie p-3"> <div class="ligne justifier-content-start mt-4"> <div class="col-md-6 ml-3"> <div class="form-group"> <div class="ligne justifier-content-center"> <select class="form-control" name="téléopérateur" id="teleoperator_select" placeholder="Teleoperadora"> <option masquée>Teleoperadora</option> </sélectionner> </div> </div> </div> </div> <div class="row justifier-content-start align-items-center mt-4"> <div class="col-md-4"> <div class="form-item"> <type d'entrée="texte" nom = "adresse" id="adresse" requis> <label for="adresse">Dirección</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <type d'entrée="texte" nom="ville" id="ville" requis> <label for="city">Ciudad</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <type d'entrée="texte" nom="cp" id="code_postal" requis> <label for="code_postal">Código Postal</label> </div> </div> </div> <div class="ligne justifier-content-center"> <type d'entrée="bouton" class = "btn btn-dark" value="Rechercher les registres" @click="searchRegisters"> </div> </div> <div class="conteneur mt-3 bg-ombre blanche arrondie p-3 "> <div class="ligne justifier-content-center"> <div class="col-md-12"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link actif" data-toggle="onglet" href="#nasigned">Aucune attribution</a> ≪/li> <li class="nav-item"> <a class="nav-link" data-toggle="onglet" href="#asigned">Asignadas</a> ≪/li> </ul> </div> <div class="conteneur" style="largeur : 95% !important;"> <div class="tab-content"> <div class="fondu entrant dans le volet d'onglets" id="assigné"> <div id="app4"> <asignedCalls></asignedCalls> </div> </div> <div class="fondu entrant dans le volet d'onglets actif" id="nasigned"> <div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div> </div> </div> </div> </div> </div> </modèle> <script> importer { onMounted, définirComponent, toRef } depuis 'vue' ; importer useNregister depuis '../composables/ncalls' importer des appels asignés depuis './roomBooss/asignedCalls' ; importer nAsignedCalls depuis './roomBooss/nasignedCalls' ; exporter le composant défini par défaut ({ composants : {asignedCalls, nAsignedCalls}, données(){ retourner{ articles: [], pagination : { page_actuelle : 1, }, registre : 0, } }, accessoires : {registre : numéro}, setup(accessoires, {émettre}, contexte) { const émetMyEvent = (événement) => émettre('registres', événement); var param_search = {}; const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() fonction supprimer (id) { supprimerAppels(id) } fonction searchId (action) { laissez id = document.getElementsByClassName('id_search')[0].value const params = [action, identifiant]; requêteForKeywords (paramètres) } fonction rechercheNom(action) { laissez id = document.getElementsByClassName('name_search')[0].value const params = [action, identifiant]; requêteForKeywords (paramètres) } fonction rechercheTéléphone(action) { laissez id = document.getElementsByClassName('phone_search')[0].value const params = [action, identifiant]; requêteForKeywords (paramètres) } fonction modifier (action) { window.location.href = '/roomboss/telemarketing/call/'+action+"/edit"; } fonction show(action) { window.location.href = '/roomboss/telemarketing/call/'+action; } fonction getPage(page){ getItems(page); } fonction searchRegisters(){ var adresse = ""; var ville = ""; var cp = ""; adresse = document.getElementById("adresse").value if(adresse != "" ) { param_search["paramètre"] = "adresse"; param_search["value"] = adresse ; } ville = document.getElementById("ville").value if(ville != "" ) { param_search["paramètre"] = "ville"; param_search["valeur"] = ville ; }cp = document.getElementById("code_postal").value si( cp != "" ) { param_search["paramètre"] = "cp"; param_search["valeur"] = cp } context.emit("registres", getCall(toRef(param_search,'param_search'))) } retour { retirer, ID de recherche, nom de recherche, rechercheTéléphone, modifier, montrer, Obtenir des résultats, obtenirPage, getCall, rechercher des registres, émettreMonÉvénement } } }) </script></pre> <p><strong>Mise à jour</strong></p> <p>Les données que j'ai envoyées peuvent être affichées dans l'onglet réseau, mais ma table est vide</p> <pre class="brush:php;toolbar:false;"><tbody> <template v-for="élément des registres"> <tr> <td>{{ item.id }}</td> <td>{{ (nom.élément) ? nom.élément : '' }} </td> <td>{{ (adresse.élément) ? adresse.élément : ''}}</td> <td>{{ (item.province) ? item.province : ''}} </td> <td>{{ (item.ville) ? item.city : ''}} </td> <td>{{ (item.cp) ? item.cp : ''}} </td> <td>{{ (item.phone) ? item.phone : ''}} </td> <td> <span class="text-light" :class="item.status.class_span"> {{ (article) ? item.status.name : 'null' }} </envergure> </td> <td> <div class="hover-text"> <div class="icon-actions"> <div class="ligne justifier-content-center"> <div class="col-md-6 offset-md-1"> <i class="fas fa-cog"></i> </div> </div> </div> <div class="actions-conteneur"> <div class="col-md-3"> <button class="tooltip-text btn" id="modifier" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button> </div> </div> </div> </td> ≪/tr> </modèle> </tbody></pre>

我在组件<code>nAsignedCalls</code>使用<code> registres</code></p> > <pre class="brush:php;toolbar:false;"><script> importer useNregister depuis '../../composables/ncalls' importer { onMounted, définirComponent } depuis 'vue' exporter le composant défini par défaut ({ nom : 'nAsignedCalls', émet : ['registre'], données(){ retourner{ articles: [], pagination : { page_actuelle : 1, }, newRegisters : Object.assign({}, this.registers), } }, setup(accessoires, {émettre}) { const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() fonction supprimer (id) { supprimerDates(id) } fonction searchId (action) { laissez id = document.getElementsByClassName('id_search')[0].value const params = [action, identifiant]; requêteForKeywords (paramètres) } fonction rechercheNom(action) { laissez id = document.getElementsByClassName('name_search')[0].value const params = [action, identifiant]; requêteForKeywords (paramètres) } fonction rechercheTéléphone(action) { laissez id = document.getElementsByClassName('phone_search')[0].value const params = [action, identifiant]; requêteForKeywords (paramètres) } fonction modifier (action) { window.location.href = '/roomboss/calls/'+action+"/edit"; } fonction getPage(page){ getItems(page); } // événement personnalisé const émetMyEvent = (événement) => émettre('registres', événement); retour { retirer, ID de recherche, nom de recherche, rechercheTéléphone, modifier, Obtenir des résultats, obtenirPage, émettreMonÉvénement, obtenir un appel } } }); </script></pre></p>

Answer 1

Mise à jour 2

à setup()函数中，您必须使用Composition API

Utilisez la fonction Composition API，您可以通过setup()中获得emit. org/api/composition-api-setup.html#setup-context" rel="nofollow noreferrer">Définir le contexte .

Vérifiez mon premier exemple :

Vous obtiendrez emitfonction

setup(props, { emit })

Ensuite, utilisez-le directement

emit("registers", getCall(toRef(param_search,'param_search')))

Dans votre cas, vous avez transmis le contexte des paramètres afin que vous puissiez appeler via context context调用emit

context.emit("registers", getCall(toRef(param_search,'param_search')))

Il semble que vous n'ayez vraiment pas besoin de définir un événement personnalisé, mais je le recommande quand même :

emits: ['registers']

Attention, this.$emit() 调用由 Options API 使用，而不是 Composition API

const { createApp, ref } = Vue;

const MyComp = {
  setup(props, { emit }) {
    const emitMyEvent = (event) => emit('registers', event);
    return { emitMyEvent }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  setup() {
    const getCall = (event) => console.log('getCall(): ' + event.target.id);
    return { getCall }
  }
  
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Mise à jour

équivaut à utiliser this.$emit 的 Options API

const { createApp, ref } = Vue;

const MyComp = {
  emits: ['registers'],  
  methods: {
    emitMyEvent: function(event) { this.$emit('registers', event) }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  methods: {
    getCall: (event) => console.log('getCall(): ' + event.target.id)
  } 
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>