상위 구성 요소 formTelemarketing에서 하위 구성 요소 nAsignedCalls로 데이터를 전송하여 이 작업을 수행하려고 합니다. 제출 버튼(제출 버튼 아님)을 클릭하면 상위 소품에서 prop:{register:Number}를 수행하고 있습니다. 양식이 채워져야 하고 내 작업 버튼이 searchRegisters 함수를 호출하고 양식에서 값을 가져오고 $emit this.$emit("register를 사용하여 내 구성 요소에 소품을 보냅니다.

vue 3의 구성 요소에서 하위 구성 요소로 데이터 보내기-PHP 중국어 네트워크 Q&A

<p>상위 구성요소 <code>formTelemarketing</code>에서 하위 구성요소 <code>nAsignedCalls</code>로 데이터를 전송하여 이 작업을 수행하려고 합니다. ;code> props에서 prop 실행: {register: Number },</code> 제출 버튼이 아닌 제출 버튼을 클릭하면 양식이 채워져야 하며, 작업 버튼은 <code>searchRegisters< /code> 양식에서 값을 가져오고 $emit를 사용하여 소품을 내 구성 요소로 보냅니다.</p> <pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre> <p>상위 구성 요소에 포함된 하위 구성 요소에는 다음이 포함됩니다. </p> <pre class="brush:php;toolbar:false;"><div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div></pre> <p>내 내보내기 기본 하위 구성 요소에는 props:['register']가 있고 내 테이블의 이 구성 요소에는 이 prop에서 모든 데이터를 가져와야 하는 for-each가 있습니다...I 오류가 표시되지 않습니다. 콘솔을 실행했지만 내 데이터를 표시할 수 없습니다</p> <pre class="brush:php;toolbar:false;">{{ (등록) ? 등록: "vacio" <template v-for="레지스터 항목"> <tr> <td>{{ item.id }}</td> <td>{{ (item.name) ? item.name : '' }} </td></pre> <p>예를 들어, 이것은 내 구조입니다. 등록이 채워졌는지 알 수 있는 조건이 있으며 항상 "vacio"를 반환합니다.</p> <p>하위 구성요소에 있는 소품 정의는 다음과 같습니다. </p> <pre class="brush:php;toolbar:false;">기본 정의 구성 요소({ 이름: 'nAssignedCalls', props:['register'],</pre> <p>내 API는 괜찮습니다. 콘솔 네트워크 탭에서 ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/라는 응답을 표시할 수 있습니다. 코드> 더 많은 데이터가 있습니다...</p> <p>내가 뭘 잘못하고 있는지 모르겠습니다. vue를 처음 접하는 사람입니다...</p> <p>리뷰를 남겨주셔서 감사드리며 부족한 영어 실력으로 인해 죄송합니다</p> <p><strong>업데이트</strong></p> <p>먼저 프로젝트에서 구성 API를 사용합니다. </p> <p>이제 하위 구성요소에서 이벤트를 정의합니다</p> <pre class="brush:php;toolbar:false;">// 맞춤형 이벤트 const 방출MyEvent = (이벤트) =>emit('registers', event); 반품 { 제거하다, 검색ID, 검색이름, 검색전화, 편집하다, 결과 가져오기, 페이지 가져오기, 방출MyEvent, getCall }</pre> <p>app.js에서 app5를 재정의했습니다. </p> <pre class="brush:php;toolbar:false;">const app5 = createApp({ 구성요소:{ n할당된 통화 }, 설정() { const getCall = (event) => console.log('getCall(): ' + event.target.id); 반환 { getCall } } }) app5.mount('#app5')</pre> <p>하지만 버튼을 클릭하면 웹이나 콘솔에 아무것도 표시할 수 없습니다</p> <p><strong>내 버튼: </strong></p> <pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Buscar registros"@click="searchRegisters() "></pre> <p>부모 구성 요소에 모든 스크립트가 작성된 상태에서 버튼을 클릭하고 함수를 호출합니다.</p> <p>使用父组件中的所有代码更新我的问题：</p> <pre class="brush:php;toolbar:false;"><템플릿> <div class="컨테이너 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"> <클래스 선택="양식 제어" name="텔레오퍼레이터" id="teleoperator_select"; placeholder="텔레오페라도라"> <옵션 숨김>텔레오페라도라</option> </선택> </div> </div> </div> </div> <div class="row justify-content-start align-items-center mt-4"> <div class="col-md-4"> <div class="form-item"> <입력 유형="텍스트" 이름="주소" id="주소" 필수> <label for="address">방향</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <입력 유형="텍스트" 이름="도시" id="도시" 필수> <label for="city">시우다드</label> </div> </div> <div class="col-md-4"> <div class="form-item"> <입력 유형="텍스트" 이름="cp" id="우편번호" 필수> <label for="postal_code">Código Postal</label> </div> </div> </div> <div class="row justify-content-center"> <입력 유형="버튼" class="btn btn-dark" value="버스카 등록" @click="searchRegisters"> </div> </div> <div class="컨테이너 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="탭" href="#nasigned">할당 없음</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="탭" href="#asigned">할당</a> </li> </ul> </div> <div class="컨테이너" style="너비: 95% !중요"> <div class="tab-content"> <div class="탭 창 페이드인" id="할당됨"> <div id="app4"> <asignedCalls></asignedCalls> </div> </div> <div class="탭 창 페이드인 활성화" id="nasigned"> <div id="app5"> <nAsignedCalls @registers="getCall"></nAsignedCalls> </div> </div> </div> </div> </div> </div> </템플릿> <스크립트> 'vue'에서 { onMounted, 정의 구성 요소, toRef } 가져오기; '../composables/ncalls'에서 useNregister 가져오기 './roomBooss/asignedCalls'에서 할당된 호출을 가져옵니다. './roomBooss/nasignedCalls'에서 nAsignedCalls를 가져옵니다. 기본 정의 내보내기({ 구성 요소: {asignedCalls, nAsignedCalls}, 데이터(){ 반품{ 항목: [], 페이지 매김: { 현재_페이지: 1, }, 등록: 0, } }, props: { 레지스터: 번호 }, setup(props, { 방출 }, 컨텍스트) { const EmitMyEvent = (이벤트) => 방출('레지스터', 이벤트); var param_search = {}; const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() 함수 제거(ID) { deleteCalls(id) } function searchId(action) { let id = document.getElementsByClassName('id_search')[0].value const params = [액션, 아이디]; queryForKeywords(매개변수) } 함수 검색이름(액션) { let id = document.getElementsByClassName('name_search')[0].value const params = [액션, 아이디]; queryForKeywords(매개변수) } 함수 searchPhone(action) { let id = document.getElementsByClassName('phone_search')[0].value const params = [액션, 아이디]; queryForKeywords(매개변수) } 함수 편집(작업) { window.location.href = '/roomboss/telemarketing/call/'+action+"/edit";; } 함수 표시(작업) { window.location.href = '/roomboss/telemarketing/call/'+action; } 함수 getPage(페이지){ getItems(페이지); } 함수 검색레지스터(){ var 주소 = "";; var city = "";; var cp = "";; 주소 = document.getElementById("주소").value if( 주소 != "" ) { param_search["매개변수"] = "주소";; param_search["값"] = 주소; } 도시 = document.getElementById("city").value if( 도시 != "" ) { param_search["매개변수"] = "도시";; param_search["값"] = 도시; }cp = document.getElementById("postal_code").value if(cp != "" ) { param_search["매개변수"] = "cp";; param_search["값"] = cp } context.emit("레지스터", getCall(toRef(param_search,'param_search'))) } 반품 { 제거하다, 검색ID, 검색이름, 검색전화, 편집하다, 보여주다, 결과 가져오기, 페이지 가져오기, 전화 받기, 검색등록, EmitMyEvent } } }) <p><strong>업데이트</strong></p> <p>내가 보낸 데이터는 네트워크 탭에 표시될 수 있지만 테이블은 비어 있습니다</p> <pre class="brush:php;toolbar:false;"><tbody> <template v-for="레지스터 항목"> <tr> <td>{{ item.id }}</td> <td>{{ (항목.이름) ? 항목.이름 : '' }} </td> <td>{{ (항목.주소) ? 항목.주소: ''}}</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.status.name : 'null' }} </스팬> </td> <td> <div class="hover-text"> <div class="icon-actions"> <div class="row justify-content-center"> <div class="col-md-6 오프셋-md-1"> <i class="fas fa-cog"></i> </div> </div> </div> <div class="컨테이너-액션"> <div class="col-md-3"> <버튼 클래스="tooltip-text btn" id="수정" @click="edit(item.id)">><i class="fas fa-2x fa-edit"></i></button> </div> </div> </div> </td> </tr> </템플릿> </tbody></pre> <p>나는 组件<code>nAsignedCalls</code>中的脚本，我尝试는 for and<code>emitMyEvent</code>및<code>newRegisters</code>중요용<code> 레지스터</code></p> > <pre class="brush:php;toolbar:false;"><script> '../../composables/ncalls'에서 useNregister 가져오기 'vue'에서 { onMounted, 정의 구성 요소 } 가져오기 기본 정의 내보내기({ 이름: 'nAssignedCalls', 방출: ['레지스터'], 데이터(){ 반품{ 항목: [], 페이지 매김: { 현재_페이지: 1, }, newRegisters: 객체.할당({}, this.registers), } }, setup(props, { 방출 }) { const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister() 함수 제거(ID) { 삭제날짜(id) } function searchId(액션) { let id = document.getElementsByClassName('id_search')[0].value const params = [액션, 아이디]; queryForKeywords(매개변수) } 함수 검색이름(액션) { let id = document.getElementsByClassName('name_search')[0].value const params = [액션, 아이디]; queryForKeywords(매개변수) } 함수 searchPhone(action) { let id = document.getElementsByClassName('phone_search')[0].value const params = [액션, 아이디]; queryForKeywords(매개변수) } 함수 편집(작업) { window.location.href = '/roomboss/calls/'+action+"/edit";; } 함수 getPage(페이지){ getItems(페이지); } // 맞춤형 이벤트 const EmitMyEvent = (이벤트) => 방출('레지스터', 이벤트); 반품 { 제거하다, 검색ID, 검색이름, 검색전화, 편집하다, 결과 가져오기, 페이지 가져오기, 방출MyEvent, getCall } } });