Saya cuba melakukan ini dengan menghantar data daripada komponen induk saya
this.$emit("registers", getCall(toRef(param_search,'param_search'))) Dalam komponen anak yang terkandung dalam komponen induk saya, saya mempunyai:
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
{{ (daftar) ?{{ item.id }} {{ (item.name) ? item.name : '' }} 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:
Dengan semua skrip dalam komponen induk saya, saya mengklik butang dan memanggil fungsi itu.
使用父组件中的所有代码更新我的问题：
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 } } }) Kemas kini
Data yang saya hantar boleh dipaparkan dalam tab rangkaian, tetapi jadual saya kosong
{{ item.id }} {{ (item.name) ? item.name : '' }} {{ (item.address) ? {{ (item.province) ? {{ (item.city) ? item.city : ''}} {{ (item.cp) ? {{ (item.phone) ? item.phone : ''}} {{ (item) ? item.status.name : 'null' }} 我在组件
>nPanggilan Ditugaskan 中的脚本，我尝试在untuk和emitMyEvent和<中的脚本，我尝试在untuk和 emitMyEvent和<中;不和中;用 mendaftar Dikemas kini
adalah sama seperti menggunakan
this.$emit的Options APIconst { createApp, ref } = Vue; const MyComp = { emits: ['registers'], methods: { emitMyEvent: function(event) { this.$emit('registers', event) } }, template: `` } 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; }
- Tentang kita Penafian Sitemap
- Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
