vue 3中从组件向子组件发送数据-PHP中文网问答

我正在尝试将数据从我的父组件 formTelemarketing 发送到我的子组件 nAsignedCalls 来执行此操作，我正在父 props 中执行一个 prop : { register: Number }, 当我单击提交按钮（不是提交按钮）时应该填充一个表格，我的操作按钮调用函数 searchRegisters 并从表单中获取值并使用 $emit 将 prop 发送到我的组件

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

在我的父组件中包含的子组件中，我有：

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

在我的导出默认子组件中，我有 props:['register']，在我的表中这个组件中，我有一个 for-each 应该从这个道具中获取所有数据...我没有控制台中出现任何错误，但我无法显示我的数据

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

例如，这是我的结构，我有一个条件来知道注册是否已填充，始终返回“vacio”。

这是我在子组件中的 props 定义：

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

我的 API 没问题，在控制台网络选项卡中我可以显示响应 ok {"data":[{"id":895,"name":"Aguilera Muriel Fatimas", i有更多数据...

我不知道我做错了，我是 vue 的新手......

感谢您的自述，并为我的英语不好而抱歉

更新

首先，我在我的项目中使用组合 API。

现在，在我的子组件中我定义了我的事件

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

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

在我的 app.js 中，我重新定义了 app5：

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

但是当我单击按钮时，我无法在网络或控制台中显示任何内容

我的按钮：

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

我的父组件中的所有内容脚本，我正在单击按钮并调用函数。

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

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

更新

我发送的数据可以在网络选项卡中显示，但我的表格是空的

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

我在组件nAsignedCalls中的脚本，我尝试在for和emitMyEvent和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);
            }

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

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

全部回复(1)

P粉9165538952023-09-02 09:42:58 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')

赞 +0

添加回复