Send data from component to subcomponent in vue 3

Question

I'm trying to do this by sending data from my parent component formTelemarketing to my child component nAsignedCalls and I'm doing this in the parent Execute a prop in props: { register: Number }, When I click the submit button (not the submit button) a form should be populated, my action button calls the function searchRegisters and Get the value from the form and use $emit to send the prop to my component

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

In the child component contained within my parent component, I have:

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

In my export default child component I have props:['register'] and in this component in my table I have a for-each that should get all the data from this prop...I No errors appear in the console but I can't display my data

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

For example, this is my structure, I have a condition to know if the registration is filled, always returns "vacio".

This is my props definition in the child component:

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

My API is fine, in the console network tab I can show the response ok {"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/code> i have more data...

I don't know what I'm doing wrong, I'm new to vue...

Thank you for your review and sorry for my poor English

Update

First, I use the composition API in my project.

Now, in my child component I define my event

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

            return {
                remove,
                searchId,
                searchName,
                searchPhone,
                edit,
                getResults,
                getPage,
                emitMyEvent,
                getCall
            }

In my app.js, I redefined app5:

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

But when I click the button I can't display anything in the web or console

My button:

<input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters() ">

With everything scripted in my parent component, I am clicking the button and calling the function.

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

<template>
    <div class="container mt-3 bg-white shadow rounded 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 hidden>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">
                    <input type="text" name="address" id="address" required>
                    <label for="address">Dirección</label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-item">
                    <input type="text" name="city" id="city" required>
                    <label for="city">Ciudad</label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-item">
                    <input type="text" name="cp" id="postal_code" required>
                    <label for="postal_code">Código Postal</label>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters">
        </div>
    </div>
    <div class="container mt-3 bg-white shadow rounded 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">No asignadas</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="tab-pane fade-in" id="asigned">
                        <div id="app4">
                            <asignedCalls></asignedCalls> 
                        </div>
                    </div>
                    <div class="tab-pane fade-in active" id="nasigned">
                        <div id="app5">
                            <nAsignedCalls @registers="getCall"></nAsignedCalls> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import { onMounted, defineComponent, toRef } from 'vue';
    import useNregister from '../composables/ncalls'
    import asignedCalls from './roomBooss/asignedCalls';
    import nAsignedCalls from './roomBooss/nasignedCalls';

    export default defineComponent({
        components: {asignedCalls, nAsignedCalls},
        data(){
            return{
                items: [],
                    pagination: {
                        current_page: 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()
            

            function remove(id) {
                deleteCalls(id)
            }
            
            function searchId(action) {
                let id = document.getElementsByClassName('id_search')[0].value
                const params = [action, id];
                
                queryForKeywords(params)
            }

            function searchName(action) {
                let id = document.getElementsByClassName('name_search')[0].value
                const params = [action, id];
                
                queryForKeywords(params)
            }

            function searchPhone(action) {
                let id = document.getElementsByClassName('phone_search')[0].value
                const params = [action, id];
                
                queryForKeywords(params)
            }

            function edit(action) {
                window.location.href = '/roomboss/telemarketing/call/' action "/edit";
            }

            function show(action) {
                window.location.href = '/roomboss/telemarketing/call/' action;
            }

            function getPage(page){
                getItems(page);
            }

            function searchRegisters(){
                var address = "";
                var city = "";
                var cp = "";

                address = document.getElementById("address").value
                if( address != "" ) {
                    param_search["parameter"] = "address";
                    param_search["value"] = address;
                }

                city = document.getElementById("city").value
                if( city != "" ) {
                    param_search["parameter"] = "city";
                    param_search["value"] = city;
                }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')))

            }

            return {
                remove,
                searchId,
                searchName,
                searchPhone,
                edit,
                show,
                getResults,
                getPage,
                getCall,
                searchRegisters,
                emitMyEvent
            }
        }
    })

</script>

Update

The data I sent can be displayed in the network tab, but my table is empty

<tbody>
            <template v-for="item of registers">
                <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="edit" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </template>
        </tbody>

My script in component nAsignedCalls, I tried using in for and emitMyEvent and newRegisters registers

>

<script>
    import useNregister from '../../composables/ncalls'
    import { onMounted, defineComponent } from 'vue'
    
    export default defineComponent({
        name: 'nAsignedCalls',
        emits: ['registers'],
        data(){
            return{
                items: [],
                    pagination: {
                        current_page: 1,
                    },
                newRegisters: Object.assign({}, this.registers),
            }
        },

        
        setup(props, { emit }) {
            const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()

            function remove(id) {
                deleteDates(id)
            }
            
            function searchId(action) {
                let id = document.getElementsByClassName('id_search')[0].value
                const params = [action, id];
                
                queryForKeywords(params)
            }

            function searchName(action) {
                let id = document.getElementsByClassName('name_search')[0].value
                const params = [action, id];
                
                queryForKeywords(params)
            }

            function searchPhone(action) {
                let id = document.getElementsByClassName('phone_search')[0].value
                const params = [action, id];
                
                queryForKeywords(params)
            }

            function edit(action) {
                window.location.href = '/roomboss/calls/' action "/edit";
            }


            function getPage(page){
                getItems(page);
            }

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

            return {
                remove,
                searchId,
                searchName,
                searchPhone,
                edit,
                getResults,
                getPage,
                emitMyEvent,
                getCall
            }
        }
    });
</script>

Answer 1

Update 2

In the setup() function you must use the Composition API

Using the Composition API, you can get the emit function in setup() via Setup context.

Check my first example:

You will get emit function

setup(props, { emit })

Then use directly

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

In your case you passed the setup context so you can call emit via context

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

It seems that you really don't need to define a custom event, but I still recommend it:

emits: ['registers']

Please note that this.$emit() call is used by the Options API, not the 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>

renew

Same as the Options API using this.$emit

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>