Heim  >  Fragen und Antworten  >  Hauptteil

Senden Sie Daten von der Komponente zur Unterkomponente in Vue 3

<p>Ich versuche dies zu erreichen, indem ich Daten von meiner übergeordneten Komponente <code>formTelemarketing</code> an meine untergeordnete Komponente <code>nAsignedCalls</code> sende ;code> Führen Sie eine Requisite in props aus: {register: Number },</code> /code> und Holen Sie sich den Wert aus dem Formular und senden Sie die Requisite mit $emit an meine Komponente</p> <pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre> <p>In der untergeordneten Komponente, die in meiner übergeordneten Komponente enthalten ist, habe ich: </p> <pre class="brush:php;toolbar:false;"><div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div></pre> <p>In meiner standardmäßigen untergeordneten Exportkomponente habe ich props:['register'] und in dieser Komponente in meiner Tabelle habe ich ein for-each, das alle Daten von dieser Requisite erhalten sollte...I Es werden keine Fehler angezeigt Konsole, aber ich kann meine Daten nicht anzeigen</p> <pre class="brush:php;toolbar:false;">{{ (register) ? register : "vacio" <template v-for="Registerelement"> <tr> <td>{{ item.id }}</td> <td>{{ (item.name) ? item.name : '' }} </td></pre> <p>Das ist zum Beispiel meine Struktur. Ich habe eine Bedingung, um zu wissen, ob die Registrierung gefüllt ist, und gibt immer „vacio“ zurück.</p> <p>Dies ist meine Requisitendefinition in der untergeordneten Komponente: </p> <pre class="brush:php;toolbar:false;">export default defineComponent({ Name: 'nAsignedCalls', props:['register'],</pre> <p>Meine API ist in Ordnung, auf der Registerkarte „Netzwerk“ der Konsole kann ich die Antwort ok anzeigen. <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ Code> Ich habe mehr Daten...</p> <p>Ich weiß nicht, was ich falsch mache, ich bin neu bei Vue...</p> <p>Vielen Dank für Ihre Bewertung und entschuldigen Sie mein schlechtes Englisch</p> <p><strong>Update</strong></p> <p>Zuerst verwende ich die Kompositions-API in meinem Projekt. </p> <p>Jetzt definiere ich in meiner untergeordneten Komponente mein Ereignis</p> <pre class="brush:php;toolbar:false;">// personalisiertes Ereignis const emitMyEvent = (event) => emit('registers', event); zurückkehren { entfernen, Such-ID, Suchname, SucheTelefon, bearbeiten, Ergebnisse bekommen, getPage, emitMyEvent, getCall }</pre> <p>In meiner app.js habe ich app5 neu definiert: </p> <pre class="brush:php;toolbar:false;">const app5 = createApp({ Komponenten:{ nAsignedCalls }, aufstellen() { const getCall = (event) => console.log('getCall(): ' + event.target.id); return { getCall } } }) app5.mount('#app5')</pre> <p>Aber wenn ich auf die Schaltfläche klicke, kann ich nichts im Web oder in der Konsole anzeigen</p> <p><strong>Mein Button: </strong></p> <pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Buscar registros" "></pre> <p>Da alles in meiner übergeordneten Komponente geskriptet ist, klicke ich auf die Schaltfläche und rufe die Funktion auf.</p> <p>使用父组件中的所有代码更新我的问题:</p> <pre class="brush:php;toolbar:false;"><template> <div class="container mt-3 bg-whiteshadow abgerundet p-3"> <div class="row justify-content-start mt-4"> <div class="col-md-6 ml-3"> <div class="form-group"> <div class="row justify-content-center"> <select class="form-control" name="teleoperator" id="teleoperator_select" placeholder="Teleoperadora"> <option hide>Teleoperadora</option> </select> </div> </div> </div> </div> <div class="row justify-content-start align-items-center mt-4"> <div class="col-md-4"> <div class="form-item"> <Eingabetyp="Text" name="Adresse" id="Adresse" erforderlich> <label for="address">Dirección</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <Eingabetyp="Text" name="Stadt" id="Stadt" erforderlich> <label for="city">Ciudad</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <Eingabetyp="Text" name="cp" id="Postleitzahl" erforderlich> <label for="postal_code">Código Postal</label> </div> </div> </div> <div class="row justify-content-center"> <Eingabetyp="Schaltfläche" class="btn btn-dark" value="Buscar registros" @click="searchRegisters"> </div> </div> <div class="container mt-3 bg-whiteshadow abgerundet p-3 "> <div class="row justify-content-center"> <div class="col-md-12"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#nasigned">Keine Zuweisungen</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#asigned">Asignadas</a> </li> </ul> </div> <div class="container" style="width: 95% !important;"> <div class="tab-content"> <div class="Einblenden des Tab-Bereichs" id="zugewiesen"> <div id="app4"> <asignedCalls></asignedCalls> </div> </div> <div class="Tab-Bereich-Einblendung aktiv" id="nasigned"> <div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div> </div> </div> </div> </div> </div> </template> <script> import { onMounted, defineComponent, toRef } from 'vue'; useNregister aus '../composables/ncalls' importieren import asignedCalls from './roomBooss/asignedCalls'; nAsignedCalls aus './roomBooss/nasignedCalls' importieren; Standard exportieren defineComponent({ Komponenten: {asignedCalls, nAsignedCalls}, Daten(){ zurückkehren{ Artikel: [], Seitennummerierung: { aktuelle_Seite: 1, }, Register: 0, } }, props: {register: Number }, setup(props, { emit }, context) { const emitMyEvent = (event) => emit('registers', event); var param_search = {}; const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() Funktion entfernen(id) { deleteCalls(id) } Funktion searchId(action) { let id = document.getElementsByClassName('id_search')[0].value const params = [Aktion, ID]; queryForKeywords(params) } Funktion searchName(action) { let id = document.getElementsByClassName('name_search')[0].value const params = [Aktion, ID]; queryForKeywords(params) } Funktion searchPhone(action) { let id = document.getElementsByClassName('phone_search')[0].value const params = [Aktion, ID]; queryForKeywords(params) } Funktion bearbeiten(Aktion) { window.location.href = '/roomboss/telemarketing/call/'+action+"/edit"; } Funktion show(action) { window.location.href = '/roomboss/telemarketing/call/'+action; } Funktion getPage(page){ getItems(page); } Funktion searchRegisters(){ var Adresse = ""; var city = ""; var cp = ""; Adresse = document.getElementById("Adresse").value if( Adresse != "" ) { param_search["parameter"] = "adresse"; param_search["value"] = Adresse; } city ​​= document.getElementById("city").value if( Stadt != "" ) { param_search["parameter"] = "city"; param_search["value"] = Stadt; }cp = document.getElementById("postal_code").value if( cp != "" ) { param_search["parameter"] = "cp"; param_search["value"] = cp } context.emit("registers", getCall(toRef(param_search,'param_search'))) } zurückkehren { entfernen, Such-ID, Suchname, SucheTelefon, bearbeiten, zeigen, Ergebnisse bekommen, getPage, getCall, Suchregister, emitMyEvent } } }) </script></pre> <p><strong>Update</strong></p> <p>Die von mir gesendeten Daten können im Netzwerk-Tab angezeigt werden, aber meine Tabelle ist leer</p> <pre class="brush:php;toolbar:false;"><tbody> <template v-for="Element der Register"> <tr> <td>{{ item.id }}</td> <td>{{ (item.name) ? item.name : '' }} </td> <td>{{ (item.address) ? item.address : ''}}</td> <td>{{ (item.province) ? item.province : ''}} </td> <td>{{ (item.city) ? 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"> {{ (item) ? item.status.name : 'null' }} </span> </td> <td> <div class="hover-text"> <div class="icon-actions"> <div class="row justify-content-center"> <div class="col-md-6 offset-md-1"> <i class="fas fa-cog"></i> </div> </div> </div> <div class="container-actions"> <div class="col-md-3"> <button class="tooltip-text btn" id="bearbeiten" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button> </div> </div> </div> </td> </tr> </template> </tbody></pre> & lt; p & gt; Register</code></p> > <pre class="brush:php;toolbar:false;"><script> useNregister aus '../../composables/ncalls' importieren import { onMounted, defineComponent } aus 'vue' Standard exportieren defineComponent({ Name: 'nAsignedCalls', gibt aus: ['registers'], Daten(){ zurückkehren{ Artikel: [], Seitennummerierung: { aktuelle_Seite: 1, }, newRegisters: Object.assign({}, this.registers), } }, setup(props, { emit }) { const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() Funktion entfernen(id) { deleteDates(id) } Funktion searchId(action) { let id = document.getElementsByClassName('id_search')[0].value const params = [Aktion, ID]; queryForKeywords(params) } Funktion searchName(action) { let id = document.getElementsByClassName('name_search')[0].value const params = [Aktion, ID]; queryForKeywords(params) } Funktion searchPhone(action) { let id = document.getElementsByClassName('phone_search')[0].value const params = [Aktion, ID]; queryForKeywords(params) } Funktion bearbeiten(Aktion) { window.location.href = '/roomboss/calls/'+action+"/edit"; } Funktion getPage(page){ getItems(page); } // personalisierte Veranstaltung const emitMyEvent = (event) => emit('registers', event); zurückkehren { entfernen, Such-ID, Suchname, SucheTelefon, bearbeiten, Ergebnisse bekommen, getPage, emitMyEvent, getCall } } }); </script></pre></p>
P粉481815897P粉481815897438 Tage vor595

Antworte allen(1)Ich werde antworten

  • P粉916553895

    P粉9165538952023-09-02 09:42:58

    更新2

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

    使用Composition API,您可以通过setup()中获得emit函数。 org/api/composition-api-setup.html#setup-context" rel="nofollow noreferrer">设置上下文

    检查我的第一个示例:

    您将获得 emit 函数

    setup(props, { emit })

    然后直接使用

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

    在您的情况下,您传递了设置上下文,因此您可以通过context调用emit

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

    看来您确实不需要定义自定义事件,但我仍然推荐它:

    emits: ['registers']

    请注意,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>

    更新

    与使用 this.$emitOptions 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>

    Antwort
    0
  • StornierenAntwort