VUE JS:これ。$ on INTイベントに渡されたパラメータが含まれていません -- events フィールド と parameters フィールド と vue.js フィールド 関連 問題

Vue JS: this.$on event doesn't contain passed parameters












2
vote

問題

日本語

ここに私のコンポーネントです。私は子供コンポーネントから親にパラメータを正常に発行しましたが、親から子供への親からではありません。 console.log('In initDetail()'); Line Fireは、<コード> $on イベントがトリガされていますが、 param は未定義です。なぜ疑問に思います。

親コンポーネント:

<事前> <コード> components: { "child-component": ChildComponent } methods: { loadDetail() { this.$emit('loadDetailEvent', 'test'); } }

子成分:

<事前> <コード> mounted() { this.$on('loadDetailEvent', this.initDetail(param)); } methods: { initDetail(param) { console.log('In initDetail()'); console.log(param); } }

私はまたすぐに機能を呼び出しようとしました。 console.log('$on event'); console.log(param); 行印刷されていない。

<事前> <コード> this.$on('loadDetailEvent', function(param){ console.log('$on event'); console.log(param); });
英語

Here are my components. I've successfully emitted parameters from the child component to the parent, but not from the parent to the child. The console.log('In initDetail()'); line fires, which means the $on event is triggered, but param is undefined. I'm wondering why.

Parent component:

components: {   "child-component": ChildComponent } methods: {   loadDetail() {     this.$emit('loadDetailEvent', 'test');   } } 

Child Component:

mounted() {   this.$on('loadDetailEvent', this.initDetail(param));  } methods: {   initDetail(param) {     console.log('In initDetail()');     console.log(param);   } } 

I've also tried calling a function right away. Neither the console.log('$on event'); nor the console.log(param); lines print.

this.$on('loadDetailEvent', function(param){   console.log('$on event');   console.log(param); }); 
</div
        
       
       

回答リスト

1
 
vote
vote
ベストアンサー
 

コメントに指摘されているように、あなたのコードに誤解がある:

  1. 親コンポーネントは、 loadDetail メソッドが呼び出されたときに<コード> loadDetailEvent イベントを発行しています。あなたの子コンポーネントは loadDetailEvent イベントをリスニングしていますが、で発行された場合にのみこのイベントを処理します。。親のVUEインスタンスがイベントを発行した場合、その子はそれを知っていません。

  2. initDetail を発射し、イベントのパラメータをその方法に渡すことで、 loadDetailEvent を処理しようとしています。しかし、あなたのコードでは、 this.initDetail(param) の範囲内で this.initDetail(param) を呼び出した結果とするだけで、 this.initDetail(param)6 を単に設定します。この場合、やりたいことは、 param 値を受け取り、それを this.initDetail

    に渡すハンドラとして匿名関数を指定することです。 <事前> <コード> loadDetail0

  3. しかし、あなたの問題の根本に乗るために:親メソッドが呼び出されたときに子メソッドを呼び出したいようです。あなたはこれをいくつかの異なる方法で行うことができます:

    1. @ohgodwhyのように、イベントバスとして使用する別のグローバルなVUEインスタンスを作成することができます。
    2. 親のテンプレートの子コンポーネントタグに loadDetail1 loadDetail2 )を設定してから、 loadDetail3
    3. @ B.Flemingが提案されているように、親コンポーネントによって渡された変化するPROP値に反応するように子コンポーネントにウォッチャーを設定することができます。 PRAPとして渡されている変数の値を維持する必要があるため、これは少しトリッキーを得ます( <コード>修飾子、下記のように。
    4. は上記の溶液のスニペットの例です:

      イベントバスを使用する:

       <コード> loadDetail5  
       <コード> loadDetail6  
      <符号> loadDetail7 :を使用した

       <コード> loadDetail8  
       <コード> loadDetail9  
      loadDetailEvent0 値とウォッチャーを使って:

       <コード> loadDetailEvent1  
      <プレクラス= "Snippet-Code-HTML LANG-HTML Prettyprint-Override"> <コード> loadDetailEvent2
 

As pointed out in the comments, there are a couple misconceptions in your code:

  1. Your parent component is emitting a loadDetailEvent event when the loadDetail method is called. Your child component is also listening for a loadDetailEvent event, but it will only handle this event if it is emitted by its own Vue instance. If the Vue instance of the parent emits an event, the child will have no knowledge of it.

  2. You are attempting to handle the loadDetailEvent by firing initDetail and passing the parameters of the event to that method. But, in your code you are simply setting the loadDetailEvent handler to be the result of calling this.initDetail(param) within the scope of the mounted hook. What you would want to do in this case would be to specify an anonymous function as the handler, which receives the param value and passes it to this.initDetail:

     this.$on('loadDetailEvent', (param) => this.initDetail(param)) 

But, to get at the root of your issue: it seems like you want to call a child method when a parent method is called. You could do this a few different ways:

  1. As @Ohgodwhy suggested, you could create a separate, global Vue instance to use as an event bus.
  2. You could set a ref (say ref="child") on the child component tag in your parent's template and then call the child component's method directly via this.$refs.child.initDetail('test').
  3. As @B.Fleming suggested, you could set a watcher on the child component to react to a changing prop value passed by the parent component. This gets a little tricky since you would need to maintain the value of the variable being passed as the prop (I would use a .sync modifier, as you can see below).

Here are example snippets of the above solutions:

Using an event bus:

let EventBus = new Vue();  Vue.component('child', {   template: `<div>Child</div>`,   mounted() {     EventBus.$on('loadDetailEvent', (param) => this.initDetail(param));    },   methods: {     initDetail(param) {       console.log('In initDetail()');       console.log(param);     }   } });  new Vue({   el: '#app',   methods: {     loadDetail() {       EventBus.$emit('loadDetailEvent', 'test');     }   } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>  <div id="app">   <child></child>   <button @click="loadDetail">load</button> </div>

Using a ref:

Vue.component('child', {   template: `<div>Child</div>`,   methods: {     initDetail(param) {       console.log('In initDetail()');       console.log(param);     }   } });  new Vue({   el: '#app',   methods: {     loadDetail() {       this.$refs.child.initDetail('test');     }   } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>  <div id="app">   <child ref="child"></child>   <button @click="loadDetail">load</button> </div>

Using a prop value and a watcher:

Vue.component('child', {   template: `<div>Child</div>`,   props: { loading: String },   methods: {     initDetail(param) {       console.log('In initDetail()');       console.log(param);     }   },   watch: {     loading(val) {       if (val) {         this.initDetail(val);         this.$emit('update:loading', '');       }     }   } });  new Vue({   el: '#app',   data() {     return { payload: '' }   },   methods: {     loadDetail() {       this.payload = 'test';     }   } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>  <div id="app">   <child :loading.sync="payload"></child>   <button @click="loadDetail">load</button> </div>
</div
 
 
   
   

関連する質問

0  'Cors Policy'をブロックしたが、ヘッダが存在する  ( Blocked by cors policy but header is present ) 
Goと <li>0 を使用してREST APIを作成し、VUEを使用してフロントエンドを作成しました。 API要求を作成するたびに、私のブラウザコンソールのエラー <li>1 が取得されます。このエラーが発生しない唯一の時間は、 <li>2 Routeです...

3  Nuxt AsyncData Axios on Refreshは認証トークンを失います  ( Nuxt asyncdata axios on refresh loses auth token ) 
メールデータの配列を取得するGET APIを呼び出しています。郵便配達にうまく機能します。 AlsyncDataメソッドを使用して配列を取得します。ユーザーがPageを更新した場合にのみ機能します。私はクッキーからトークンを罰金だけ引きます。通常、非同期以外の...

3  Global Axios Configを未定義のベアラトークン  ( Bearer token undefined with global axios config ) 
AXIOSを使用してVUEアプリを作成しました。私はVUE UI依存関係のインストールによってAxiosをインストールしました。私の main.js ファイルでグローバル設定が追加されました <事前> <コード> import Vue from "vue";...

0  HTMLテーブルを使用してVUEにJSONデータを生成する方法  ( How to generate json data in vue with html table ) 
単一の行でデータを生成したいのですが、コードには何かがありますが、機能していません。私はJSON内のオブジェクトの配列を持っています、そしてそれをHTMLテーブルで印刷するために、私はどうやらネストされたループでそれを繰り返す必要があります。 この構造を見てく...

1  Rails 5.2 Axiosリクエストで406を返す  ( Rails 5 2 returning 406 with axios request ) 
Rails 5.2にRails APIとVuejsのフロントエンドを使用して、APIをリクエストするためのAXIOSを使用しています。 rour and p>に郵便配達を要求するとき [get] http:// localhost:3000 / foo...

5  aing-init init vuejsのように  ( Angular ng init like for vuejs ) 
vuejs を使用して、テンプレートに新しい変数を作成する必要があります。 角度で行くことができます: <事前> <コード> rectangle(M, N)4 vuejs ?にどのように達成することができますか ありがとう! ...

1  胎児を使ったLaravel  ( Laravel using vueify ) 
私は最初のLaravelプロジェクトで母国を使おうとしています、そしてそれが機能していない理由はよくわかりません。 vueifyとLaravel-Elixir-vueifyモジュールの両方をインストールしました。 gulpfile.js <事前> <...

1  VUE JSの複数の要素をオンにします  ( Onclick multiple elements in vue js ) 
私は画像の隠蔽と表示画像の説明を隠しています(ユーザーが画像のサムネイルをクリックすると、説明がアニメーション化されます)。私はすでに移行についてvuejsのチュートリアルに従ったが、残念ながらサムネイルが1つしかありません。 try and errors ...

0  vue-routerパラメータとのリンク(更新時のエラー?)  ( Vue router linking with parameter error on refresh ) 
パラメータを持つコンポーネントに `router-link 'から指示されたとき、パラメータは機能しますが、その後ページを更新しないのですか? (下記の状況) routes.js これら2つのパスを含みます: <事前> <コード> { path: ...

0  VUEXの状態に基づいてビデオを動的に変更できますか?  ( Can you dynamically change the video based on vuex state ) 
私は小さなウェブアプリを持っています、それはファセメイムのように見えるように命名します。 VUEXの値を更新する「次へ」ボタンをクリックしてビデオ要素を切り替えたいと考えて、それに応じてビデオがスワップアウトされます。私はこのようにしてみました: <事前> <...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有