Senden Sie Daten von der Komponente zur Unterkomponente in Vue 3

Question

Ich versuche dies zu erreichen, indem ich Daten von meiner übergeordneten Komponente formTelemarketing an meine untergeordnete Komponente nAsignedCalls sende ;code> Führen Sie eine Requisite in props aus: {register: Number }, /code> und Holen Sie sich den Wert aus dem Formular und senden Sie die Requisite mit $emit an meine Komponente

this.$emit("registers", getCall(toRef(param_search,'param_search')))

In der untergeordneten Komponente, die in meiner übergeordneten Komponente enthalten ist, habe ich:

<div id="app5">
     <nAsignedCalls @registers="getCall"></nAsignedCalls>
</div>

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

{{ (register) ? register : "vacio"
            <template v-for="Registerelement">
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ (item.name) ? item.name : '' }} </td>

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.

Dies ist meine Requisitendefinition in der untergeordneten Komponente:

export default defineComponent({
        Name: 'nAsignedCalls',
        props:['register'],

Meine API ist in Ordnung, auf der Registerkarte „Netzwerk“ der Konsole kann ich die Antwort ok anzeigen. {"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ Code> Ich habe mehr Daten...

Ich weiß nicht, was ich falsch mache, ich bin neu bei Vue...

Vielen Dank für Ihre Bewertung und entschuldigen Sie mein schlechtes Englisch

Update

Zuerst verwende ich die Kompositions-API in meinem Projekt.

Jetzt definiere ich in meiner untergeordneten Komponente mein Ereignis

// personalisiertes Ereignis
            const emitMyEvent = (event) => emit('registers', event);

            zurückkehren {
                entfernen,
                Such-ID,
                Suchname,
                SucheTelefon,
                bearbeiten,
                Ergebnisse bekommen,
                getPage,
                emitMyEvent,
                getCall
            }

In meiner app.js habe ich app5 neu definiert:

const app5 = createApp({
    Komponenten:{
        nAsignedCalls
    },
    aufstellen() {
        const getCall = (event) => console.log('getCall(): ' + event.target.id);
        return { getCall }
    }
})
app5.mount('#app5')

Aber wenn ich auf die Schaltfläche klicke, kann ich nichts im Web oder in der Konsole anzeigen

Mein Button:

<input type="button" class="btn btn-dark" value="Buscar registros" ">

Da alles in meiner übergeordneten Komponente geskriptet ist, klicke ich auf die Schaltfläche und rufe die Funktion auf.

使用父组件中的所有代码更新我的问题:

<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>

Update

Die von mir gesendeten Daten können im Netzwerk-Tab angezeigt werden, aber meine Tabelle ist leer

<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>

& lt; p & gt; Register

>

<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>

Answer 1

更新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.$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>