vue 3의 구성 요소에서 하위 구성 요소로 데이터 보내기
<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
}
}
});
