vue 3 のコンポーネントからサブコンポーネントにデータを送信する
<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("registers", getCall(toRef(param_search,'param_search')))</pre>
<p>親コンポーネント内に含まれる子コンポーネントには次のものがあります: </p>
<pre class="brush:php;toolbar:false;"><div id="app5">
<nAssignedCalls @registers="getCall"></nAsignedCalls>
</div></pre>
<p>エクスポートのデフォルト子コンポーネントには props:['register'] があり、テーブル内のこのコンポーネントには、このプロパティからすべてのデータを取得する 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>これは子コンポーネントの props 定義です: </p>
<pre class="brush:php;toolbar:false;">デフォルトの定義コンポーネントをエクスポート({
名前: 'nAssignedCalls',
props:['register'],</pre>
<p>私の API は問題ありません。コンソールの [ネットワーク] タブに応答 [ok] が表示されます <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/ code> さらにデータがあります...</p>
<p>Vue は初めてなので、何が間違っているのかわかりません...</p>
<p>レビューありがとうございます。私の下手な英語でごめんなさい</p>
<p><strong>アップデート</strong></p>
<p>まず、プロジェクトでコンポジション API を使用します。 </p>
<p>次に、子コンポーネントでイベントを定義します</p>
<pre class="brush:php;toolbar:false;">// パーソナライズされたイベント
const EmitMyEvent = (event) => Emit('registers',event);
戻る {
取り除く、
検索ID、
検索名、
検索電話、
編集、
結果の取得、
ページの取得、
エミットマイイベント、
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>しかし、ボタンをクリックしても、Web またはコンソールに何も表示されません</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-白シャドウ丸め p-3">
<div class="row justify-content-start mt-4"""
<div class="col-md-6ml-3""
<div class="フォームグループ">
<div class="row justify-content-center">
<select class="フォームコントロール"名前=「遠隔操作者」 id="teleoperator_select" placeholder="テレオペラドラ">
<option hidden>テレオペラドラ</option>
</選択>
</div>
</div>
</div>
</div>
<div class="row justify-content-start align-items-center mt-4">
<div class="フォームアイテム">
<入力タイプ="テキスト"名前=「住所」 id="アドレス"必須>
<label for="address">方向</label>
</div>
</div>
<div class="フォームアイテム">
<入力タイプ="テキスト"名前=「都市」 id="都市"必須>
<label for="city">シウダード</label>
</div>
</div>
<div class="フォームアイテム">
<入力タイプ="テキスト"名前=「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 シャドウ丸め p-3 ">
<div class="row justify-content-center">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="ナビゲーションリンクがアクティブ"データトグル=「タブ」 href="#nasigned">割り当てはありません</a>
</li>
<li class="nav-item">
<a class="ナビゲーションリンク"データトグル=「タブ」 href="#assigned">アサインダス</a>
</li>
</ul>
</div>
<div クラス = "コンテナ" style="幅: 95% !重要;">
<div class="タブコンテンツ">
<div class="タブペインのフェードイン" id="割り当て済み">
<div id="app4">
<assignedCalls></assignedCalls>
</div>
</div>
<div class="タブペインのフェードインがアクティブになっています" id="署名済み">
<div id="app5">
<nAssignedCalls @registers="getCall"></nAsignedCalls>
</div>
</div>
</div>
</div>
</div>
</div>
</テンプレート>
<スクリプト>
import { onMounted,defineComponent,toRef } from 'vue';
useNregister を '../composables/ncalls' からインポートします
「./roomBooss/assignedCalls」からassignedCallsをインポートします。
'./roomBooss/nasignedCalls' から nAssignedCalls をインポートします。
デフォルトのエクスポートdefineComponent({
コンポーネント: {assignedCalls、nAssignedCalls}、
データ（）{
戻る{
アイテム: []、
ページネーション: {
現在のページ: 1、
}、
レジスタ: 0、
}
}、
小道具: { レジスタ: 数値 }、
setup(props, { 出力 }, context) {
const EmitMyEvent = (イベント) => Emit('レジスタ', イベント);
var param_search = {};
const { getCall、deleteCalls、queryForKeywords、getResults、getItems } = useNregister()
関数削除(id) {
削除呼び出し(id)
}
関数 searchId(アクション) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [アクション, ID];
queryForKeywords(パラメータ)
}
関数検索名(アクション) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [アクション, ID];
queryForKeywords(パラメータ)
}
関数 searchPhone(アクション) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [アクション, ID];
queryForKeywords(パラメータ)
}
関数編集(アクション) {
window.location.href = '/roomboss/telemarketing/call/' アクション "/edit";
}
関数 show(アクション) {
window.location.href = '/roomboss/telemarketing/call/' アクション;
}
関数 getPage(ページ){
getItems(ページ);
}
関数 searchRegisters(){
var アドレス = "";
var city = "";
var cp = "";
アドレス = document.getElementById("アドレス").value
if( アドレス != "" ) {
param_search["パラメータ"] = "アドレス";
param_search["値"] = アドレス;
}
city = document.getElementById("city").value
if( 都市 != "" ) {
param_search["パラメータ"] = "都市";
param_search["値"] = 都市;
}cp = document.getElementById("郵便番号").value
if( cp != "" ) {
param_search["パラメータ"] = "cp";
param_search["値"] = cp
}
context.emit("レジスタ", getCall(toRef(param_search,'param_search')))
}
戻る {
取り除く、
検索ID、
検索名、
検索電話、
編集、
見せる、
結果の取得、
ページの取得、
getCall、
検索登録、
エミットマイイベント
}
}
})
</script></pre>
<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' }}
</span>
</td>
<td>
<div class="ホバーテキスト">
<div class="アイコンアクション">
<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="コンテナアクション">
<ボタンクラス="ツールチップテキストボタン" 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 および <code>emitMyEvent</code> および <code>newRegisters</code> レジスタ</で <code> を使用してみましたコード></p>>
<pre class="brush:php;toolbar:false;"><script>
useNregister を '../../composables/ncalls' からインポートします
import { onMounted,defineComponent } from 'vue'
デフォルトのエクスポートdefineComponent({
名前: 'nAssignedCalls',
発行: ['レジスタ'],
データ（）{
戻る{
アイテム: []、
ページネーション: {
現在のページ: 1、
}、
newRegisters: Object.assign({}, this.registers),
}
}、
setup(props, { 出力 }) {
const { getCall、deleteCalls、queryForKeywords、getResults、getItems } = useNregister()
関数削除(id) {
削除日付(id)
}
関数 searchId(アクション) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [アクション, ID];
queryForKeywords(パラメータ)
}
関数検索名(アクション) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [アクション, ID];
queryForKeywords(パラメータ)
}
関数 searchPhone(アクション) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [アクション, ID];
queryForKeywords(パラメータ)
}
関数編集(アクション) {
window.location.href = '/roomboss/calls/' アクション "/edit";
}
関数 getPage(ページ){
getItems(ページ);
}
//パーソナライズされたイベント
const EmitMyEvent = (event) => Emit('registers',event);
戻る {
取り除く、
検索ID、
検索名、
検索電話、
編集、
結果の取得、
ページの取得、
エミットマイイベント、
getCall
}
}
});
</script></pre></p>
