<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
アップデート 2
を使用する必要があります。setup()関数では、Composition APIComposition APIを使用すると、setup() のemit関数を取得できます。 。 org/api/composition-api-setup.html#setup-context" rel="nofollow noreferrer">コンテキストのセットアップ.最初の例を確認してください:
あなたは
リーリーemit関数を取得しますその後、直接使用します
リーリーあなたの場合、セットアップコンテキストを渡したので、
を呼び出すことができます。 リーリーcontext経由でemitカスタム イベントを定義する必要はないようですが、それでも定義することをお勧めします。
リーリー
によって使用されることに注意してください。this.$emit()呼び出しは、Composition APIではなく、Options API更新
this.$emit
を使用したOptions APIと同じ