Hantar data daripada komponen ke subkomponen dalam vue 3

Question

Saya cuba melakukan ini dengan menghantar data daripada komponen induk saya formTelemarketing kepada komponen anak saya nAsignedCalls ;kod> Laksanakan prop dalam prop: { daftar: Nombor }, /code> dan Dapatkan nilai daripada borang dan gunakan $emit untuk menghantar prop ke komponen saya

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

Dalam komponen anak yang terkandung dalam komponen induk saya, saya mempunyai:

<div id="app5">
     <nAsignedCalls @registers="getCall"></nAsignedCalls>
</div></pra>
<p>Dalam komponen anak lalai eksport saya, saya mempunyai prop:['register'] dan dalam komponen ini dalam jadual saya, saya mempunyai for-each yang sepatutnya mendapatkan semua data daripada prop ini...I Tiada ralat muncul dalam konsol tetapi saya tidak dapat memaparkan data saya</p>
<pre class="brush:php;toolbar:false;">{{ (daftar) ?
            <template v-for="item daftar">
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ (item.name) ? item.name : '' }} </td>

Sebagai contoh, ini adalah struktur saya, saya mempunyai syarat untuk mengetahui sama ada pendaftaran telah diisi, sentiasa mengembalikan "vacio".

Ini ialah definisi prop saya dalam komponen kanak-kanak:

eksport lalai defineComponent({
        nama: 'nAsignedCalls',
        props:['register'],

API saya baik, dalam tab rangkaian konsol saya boleh menunjukkan respons ok {"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ kod> saya mempunyai lebih banyak data...

Saya tidak tahu apa yang saya lakukan salah, saya baru menggunakan vue...

Terima kasih atas ulasan anda dan maaf atas bahasa Inggeris saya yang lemah

Kemas kini

Pertama, saya menggunakan API komposisi dalam projek saya.

Sekarang, dalam komponen anak saya, saya mentakrifkan acara saya

// acara diperibadikan
            const emitMyEvent = (event) =>

            kembali {
                keluarkan,
                searchId,
                carianNama,
                carianTelefon,
                edit,
                getResults,
                getPage,
                emitMyEvent,
                getCall
            }

Dalam app.js saya, saya mentakrifkan semula app5:

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

Tetapi apabila saya mengklik butang saya tidak dapat memaparkan apa-apa dalam web atau konsol

Butang saya:

<input type="button" class="btn btn-dark" ">

Dengan semua skrip dalam komponen induk saya, saya mengklik butang dan memanggil fungsi itu.

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

<template>
    <div class="bekas mt-3 bg-bayang putih bulat p-3">
        <div class="baris justify-content-start mt-4">
            <div class="col-md-6 ml-3">
                <div class="kumpulan bentuk">
                    <div class="baris justify-content-center">
                        <pilih kelas="kawalan bentuk" name="teleoperator" id="teleoperator_select" pemegang tempat="Teleoperadora">
                            <pilihan tersembunyi>Teleoperadora</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="baris justify-content-start align-item-center mt-4">
            <div class="col-md-4">
                <div class="form-item">
                    <jenis input="teks" nama="alamat" id="alamat" diperlukan>
                    <label untuk="alamat">Dirección</label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-item">
                    <jenis input="teks" nama="bandar" id="bandar" diperlukan>
                    <label untuk="bandar">Ciudad</label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-item">
                    <jenis input="teks" nama="cp" id="kod_pos" diperlukan>
                    <label untuk="pos_kod">Código Pos</label>
                </div>
            </div>
        </div>
        <div class="baris justify-content-center">
            <jenis input="butang" class="btn btn-gelap" value="Buscar registros" @click="searchRegisters">
        </div>
    </div>
    <div class="bekas mt-3 bg-bayang putih bulat p-3 ">
        <div class="baris justify-content-center">
            <div class="col-md-12">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="pautan navigasi aktif" data-toggle="tab" href="#nasigned">Tiada asignadas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#asigned">Asignadas</a>
                    </li>
                </ul>
            </div>
            <div class="bekas" style="lebar: 95% !penting;">
                <div class="tab-kandungan">
                    <div class="tab-pane fade-in" id="ditugaskan">
                        <div id="app4">
                            <asignedCalls></asignedCalls> 
                        </div>
                    </div>
                    <div class="tab-pane fade-in aktif" id="nasigned">
                        <div id="app5">
                            <nAsignedCalls @registers="getCall"></nAsignedCalls> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<skrip>

    import { onMounted, defineComponent, toRef } daripada 'vue';
    import useNregister daripada '../composables/calls'
    import assignedCalls daripada './roomBooss/asignedCalls';
    import nAsignedCalls daripada './roomBooss/nasignedCalls';

    eksport lalai defineComponent({
        komponen: {asignedCalls, nAsignedCalls},
        data(){
            kembali{
                item: [],
                    penomboran: {
                        halaman_semasa: 1,
                    },
                daftar: 0,
            }
        },
        props: { register: Number },
        
        persediaan(props, { emit }, context) {
            const emitMyEvent = (acara) => emit('mendaftar', acara);

            var param_search = {};
            const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()
            

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

            fungsi carianName(tindakan) {
                let id = document.getElementsByClassName('name_search')[0].value
                const params = [tindakan, id];
                
                queryForKeywords(params)
            }

            carian fungsiTelefon(tindakan) {
                let id = document.getElementsByClassName('phone_search')[0].value
                const params = [tindakan, id];
                
                queryForKeywords(params)
            }

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

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

            fungsi getPage(halaman){
                getItems(halaman);
            }

            fungsi searchRegisters(){
                alamat var = "";
                var city = "";
                var cp = "";

                alamat = document.getElementById("alamat").nilai
                jika( alamat != "" ) {
                    param_search["parameter"] = "alamat";
                    param_search["nilai"] = alamat;
                }

                bandar = document.getElementById("bandar").nilai
                jika( bandar != "" ) {
                    param_search["parameter"] = "bandar";
                    param_search["nilai"] = bandar;
                }cp = document.getElementById("postal_code").value
                jika( cp != "" ) {
                    param_search["parameter"] = "cp";
                    param_search["nilai"] = cp
                }

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

            }

            kembali {
                keluarkan,
                searchId,
                carianNama,
                carianTelefon,
                edit,
                menunjukkan,
                getResults,
                getPage,
                getCall,
                carianDaftar,
                emitMyEvent
            }
        }
    })

</script>

Kemas kini

Data yang saya hantar boleh dipaparkan dalam tab rangkaian, tetapi jadual saya kosong

<tbody>
            <template v-for="item daftar">
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ (item.name) ? item.name : '' }} </td>
                    <td>{{ (item.address) ?
                    <td>{{ (item.province) ?
                    <td>{{ (item.city) ? item.city : ''}} </td>
                    <td>{{ (item.cp) ?
                    <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="ikon-tindakan">
                                <div class="baris justify-content-center">
                                    <div class="col-md-6 offset-md-1">
                                        <i class="fas fa-cog"></i>
                                    </div>
                                </div>
                            </div>
                            <kelas div="tindakan bekas">
                                <div class="col-md-3">
                                    <kelas butang="teks petua alat btn" id="edit" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </template>
        </tbody>

我在组件nPanggilan Ditugaskan中的脚本，我尝试在untuk和emitMyEvent和<中的脚本，我尝试在untuk和emitMyEvent和<中;不和中;用 mendaftar

>

<script>
    import useNregister daripada '../../composables/calls'
    import { onMounted, defineComponent } daripada 'vue'
    
    eksport lalai defineComponent({
        nama: 'nAsignedCalls',
        memancarkan: ['mendaftar'],
        data(){
            kembali{
                item: [],
                    penomboran: {
                        halaman_semasa: 1,
                    },
                newRegisters: Object.assign({}, this.registers),
            }
        },

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

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

            fungsi carianName(tindakan) {
                let id = document.getElementsByClassName('name_search')[0].value
                const params = [tindakan, id];
                
                queryForKeywords(params)
            }

            carian fungsiTelefon(tindakan) {
                let id = document.getElementsByClassName('phone_search')[0].value
                const params = [tindakan, id];
                
                queryForKeywords(params)
            }

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


            fungsi getPage(halaman){
                getItems(halaman);
            }

            // acara peribadi
            const emitMyEvent = (acara) => emit('mendaftar', acara);

            kembali { 
                keluarkan,
                searchId,
                carianNama,
                carianTelefon,
                edit,
                getResults,
                getPage,
                emitMyEvent,
                getCall
            }
        }
    });
</skrip>

Answer 1

Kemas kini 2

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

Gunakan fungsi Composition API，您可以通过setup()中获得emit. org/api/composition-api-setup.html#setup-context" rel="nofollow noreferrer">Tetapkan konteks .

Semak contoh pertama saya:

Anda akan mendapat emit fungsi

setup(props, { emit })

Kemudian gunakan terus

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

Dalam kes anda, anda melepasi konteks tetapan supaya anda boleh memanggil melalui konteks context调用emit

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

Nampaknya anda tidak perlu menentukan acara tersuai, tetapi saya tetap mengesyorkannya:

emits: ['registers']

Sila ambil perhatian, 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>

Dikemas kini

adalah sama seperti menggunakan 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>