vue 3中从组件向子组件发送数据
P粉481815897
P粉481815897 2023-09-01 17:12:52
[Vue.js讨论组]
<p>我正在尝试将数据从我的父组件 <code>formTelemarketing</code> 发送到我的子组件 <code>nAsignedCalls</code> 来执行此操作,我正在父 <code>props 中执行一个 prop : { register: Number },</code> 当我单击提交按钮(不是提交按钮)时应该填充一个表格,我的操作按钮调用函数 <code>searchRegisters</code> 并从表单中获取值并使用 $emit 将 prop 发送到我的组件</p> <pre class="brush:php;toolbar:false;">this.$emit(&quot;registers&quot;, getCall(toRef(param_search,'param_search')))</pre> <p>在我的父组件中包含的子组件中,我有:</p> <pre class="brush:php;toolbar:false;">&lt;div id=&quot;app5&quot;&gt; &lt;nAsignedCalls @registers=&quot;getCall&quot;&gt;&lt;/nAsignedCalls&gt; &lt;/div&gt;</pre> <p>在我的导出默认子组件中,我有 props:['register'],在我的表中这个组件中,我有一个 for-each 应该从这个道具中获取所有数据...我没有控制台中出现任何错误,但我无法显示我的数据</p> <pre class="brush:php;toolbar:false;">{{ (register) ? register : &quot;vacio&quot; }} &lt;template v-for=&quot;item of register&quot;&gt; &lt;tr&gt; &lt;td&gt;{{ item.id }}&lt;/td&gt; &lt;td&gt;{{ (item.name) ? item.name : '' }} &lt;/td&gt;</pre> <p>例如,这是我的结构,我有一个条件来知道注册是否已填充,始终返回“vacio”。</p> <p>这是我在子组件中的 props 定义:</p> <pre class="brush:php;toolbar:false;">export default defineComponent({ name: 'nAsignedCalls', props:['register'],</pre> <p>我的 API 没问题,在控制台网络选项卡中我可以显示响应 ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",</code> i有更多数据...</p> <p>我不知道我做错了,我是 vue 的新手......</p> <p>感谢您的自述,并为我的英语不好而抱歉</p> <p><strong>更新</strong></p> <p>首先,我在我的项目中使用组合 API。</p> <p>现在,在我的子组件中我定义了我的事件</p> <pre class="brush:php;toolbar:false;">// personaliced event const emitMyEvent = (event) =&gt; emit('registers', event); return { remove, searchId, searchName, searchPhone, edit, getResults, getPage, emitMyEvent, getCall }</pre> <p>在我的 app.js 中,我重新定义了 app5:</p> <pre class="brush:php;toolbar:false;">const app5 = createApp({ components:{ nAsignedCalls }, setup() { const getCall = (event) =&gt; console.log('getCall(): ' + event.target.id); return { getCall } } }) app5.mount('#app5')</pre> <p>但是当我单击按钮时,我无法在网络或控制台中显示任何内容</p> <p><strong>我的按钮:</strong></p> <pre class="brush:php;toolbar:false;">&lt;input type=&quot;button&quot; class=&quot;btn btn-dark&quot; value=&quot;Buscar registros&quot; @click=&quot;searchRegisters()&quot;&gt;</pre> <p>我的父组件中的所有内容脚本,我正在单击按钮并调用函数。</p> <p>使用父组件中的所有代码更新我的问题:</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;div class=&quot;container mt-3 bg-white shadow rounded p-3&quot;&gt; &lt;div class=&quot;row justify-content-start mt-4&quot;&gt; &lt;div class=&quot;col-md-6 ml-3&quot;&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;select class=&quot;form-control&quot; name=&quot;teleoperator&quot; id=&quot;teleoperator_select&quot; placeholder=&quot;Teleoperadora&quot;&gt; &lt;option hidden&gt;Teleoperadora&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-start align-items-center mt-4&quot;&gt; &lt;div class=&quot;col-md-4&quot;&gt; &lt;div class=&quot;form-item&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;address&quot; id=&quot;address&quot; required&gt; &lt;label for=&quot;address&quot;&gt;Dirección&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-md-4&quot;&gt; &lt;div class=&quot;form-item&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;city&quot; id=&quot;city&quot; required&gt; &lt;label for=&quot;city&quot;&gt;Ciudad&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-md-4&quot;&gt; &lt;div class=&quot;form-item&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;cp&quot; id=&quot;postal_code&quot; required&gt; &lt;label for=&quot;postal_code&quot;&gt;Código Postal&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;input type=&quot;button&quot; class=&quot;btn btn-dark&quot; value=&quot;Buscar registros&quot; @click=&quot;searchRegisters&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;container mt-3 bg-white shadow rounded p-3 &quot;&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;div class=&quot;col-md-12&quot;&gt; &lt;ul class=&quot;nav nav-pills&quot;&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; data-toggle=&quot;tab&quot; href=&quot;#nasigned&quot;&gt;No asignadas&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; data-toggle=&quot;tab&quot; href=&quot;#asigned&quot;&gt;Asignadas&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class=&quot;container&quot; style=&quot;width: 95% !important;&quot;&gt; &lt;div class=&quot;tab-content&quot;&gt; &lt;div class=&quot;tab-pane fade-in&quot; id=&quot;asigned&quot;&gt; &lt;div id=&quot;app4&quot;&gt; &lt;asignedCalls&gt;&lt;/asignedCalls&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tab-pane fade-in active&quot; id=&quot;nasigned&quot;&gt; &lt;div id=&quot;app5&quot;&gt; &lt;nAsignedCalls @registers=&quot;getCall&quot;&gt;&lt;/nAsignedCalls&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; 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) =&gt; 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+&quot;/edit&quot;; } function show(action) { window.location.href = '/roomboss/telemarketing/call/'+action; } function getPage(page){ getItems(page); } function searchRegisters(){ var address = &quot;&quot;; var city = &quot;&quot;; var cp = &quot;&quot;; address = document.getElementById(&quot;address&quot;).value if( address != &quot;&quot; ) { param_search[&quot;parameter&quot;] = &quot;address&quot;; param_search[&quot;value&quot;] = address; } city = document.getElementById(&quot;city&quot;).value if( city != &quot;&quot; ) { param_search[&quot;parameter&quot;] = &quot;city&quot;; param_search[&quot;value&quot;] = city; } cp = document.getElementById(&quot;postal_code&quot;).value if( cp != &quot;&quot; ) { param_search[&quot;parameter&quot;] = &quot;cp&quot;; param_search[&quot;value&quot;] = cp } context.emit(&quot;registers&quot;, getCall(toRef(param_search,'param_search'))) } return { remove, searchId, searchName, searchPhone, edit, show, getResults, getPage, getCall, searchRegisters, emitMyEvent } } }) &lt;/script&gt;</pre> <p><strong>更新</strong></p> <p>我发送的数据可以在网络选项卡中显示,但我的表格是空的</p> <pre class="brush:php;toolbar:false;">&lt;tbody&gt; &lt;template v-for=&quot;item of registers&quot;&gt; &lt;tr&gt; &lt;td&gt;{{ item.id }}&lt;/td&gt; &lt;td&gt;{{ (item.name) ? item.name : '' }} &lt;/td&gt; &lt;td&gt;{{ (item.address) ? item.address : ''}}&lt;/td&gt; &lt;td&gt;{{ (item.province) ? item.province : ''}} &lt;/td&gt; &lt;td&gt;{{ (item.city) ? item.city : ''}} &lt;/td&gt; &lt;td&gt;{{ (item.cp) ? item.cp : ''}} &lt;/td&gt; &lt;td&gt;{{ (item.phone) ? item.phone : ''}} &lt;/td&gt; &lt;td&gt; &lt;span class=&quot;text-light&quot; :class=&quot;item.status.class_span&quot;&gt; {{ (item) ? item.status.name : 'null' }} &lt;/span&gt; &lt;/td&gt; &lt;td&gt; &lt;div class=&quot;hover-text&quot;&gt; &lt;div class=&quot;icon-actions&quot;&gt; &lt;div class=&quot;row justify-content-center&quot;&gt; &lt;div class=&quot;col-md-6 offset-md-1&quot;&gt; &lt;i class=&quot;fas fa-cog&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;container-actions&quot;&gt; &lt;div class=&quot;col-md-3&quot;&gt; &lt;button class=&quot;tooltip-text btn&quot; id=&quot;edit&quot; @click=&quot;edit(item.id)&quot;&gt;&lt;i class=&quot;fas fa-2x fa-edit&quot;&gt;&lt;/i&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/template&gt; &lt;/tbody&gt;</pre> <p>我在组件<code>nAsignedCalls</code>中的脚本,我尝试在for和<code>emitMyEvent</code>和<code>newRegisters</code>中使用<code>registers</code></p> > <pre class="brush:php;toolbar:false;">&lt;script&gt; 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+&quot;/edit&quot;; } function getPage(page){ getItems(page); } // personaliced event const emitMyEvent = (event) =&gt; emit('registers', event); return { remove, searchId, searchName, searchPhone, edit, getResults, getPage, emitMyEvent, getCall } } }); &lt;/script&gt;</pre></p>
P粉481815897
P粉481815897

全部回复(1)
P粉916553895

更新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.$emitOptions 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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号