は2

Question

私はVue.jsでカスタムコンポーネントを持ってVue.jsのコンポーネントからイベントリスナーにアクセスすることは可能です（2）のように：

Vue.component("modal-panel", { 
    props: { 
     id: { 
      required: true 
     }, 
     title: {} , 
     size: { 
      validator: function(value) { 
       return !value || value=="lg" || value=="sm"; 
      } 
     }, 
     confirmLabel: { 
      "default": "Yes", 
     }, 
     closeLabel: { 
      "default": "No" 
     }, 
     confirm: { 
      type: Function 
     } 
    }, 
    //... 
    template: ` 
     //... 
     <button type="button" class="btn btn-primary confirm" data-dismiss="modal" v-on:click="$emit('confirm')" v-if="confirm">{{confirmLabel}}</button> 
     //... 
    ` 
} 

そして、このコードはコンポーネント

<modal-panel title="New User" id="userModal" @confirm="doSomething">...</modal-panel> 

を使用しています

コンポーネントコードから分かるように、確認が小道具に挿入されており、テンプレート内のボタンコードには、確認リスナーが取り付けられているかどうかに応じて条件付きレンダリングがあります。ただし、ボタンはレンダリングされません。コンポーネントDOMとプロパティをチェックしましたが、そのような情報はありません。

vue.jsのコンポーネントに接続されている特定のリスナーが存在するかどうかによって条件付きレンダリングを行うことはできますか？

ありがとうございました。

Answer 1

一般的に、コンポーネントが物事を判断するために手を伸ばすのは良い習慣ではありません。

代わりにconfirmコールバックプロパティがあることをお勧めします。関数をプロパティとして渡すことができます。次に、コールバックを受信したかどうかに関わらず、ボタンを表示/非表示にすることができます。

Vue.component("modal",{ 
    props:["confirm"], 
    template: ` 
    <div> 
     <h1>Modal</h1> 
     <button v-if="confirm" @click="confirm">Confirm</button> 
    </div> 
    ` 
}) 

Example。

編集

が与えられたイベントのためのコンポーネントに定義されたハンドラがあるが、それは内部Vueのプロパティを調べる必要とし、あなただけご自身の責任でこれを使用する必要がある場合は決定することができます。

Vue.component("modal",{ 
    template: ` 
    <div> 
     <h1>Modal</h1> 
     <button v-if="hasConfirmHandler" @click="$emit('confirm')">Confirm</button> 
    </div> 
    `, 
    computed:{ 
    hasConfirmHandler(){ 
     return !!this._events["confirm"] 
    } 
    } 
}) 

ハンドラが親から定義されている場合、コンポーネントの_eventsプロパティは、ハンドラが含まれています。

Example。

Answer 2

文字列として渡すのではなく、v-bindまたは:で関数をバインドする必要があります。だから、:confirmの構文を使用します。

<modal-panel title="New User" id="userModal" :confirm="doSomething"></modal-panel> 

次にコンポーネントテンプレートで簡単にv-on:click="confirm()"使用：

<button type="button" class="btn btn-primary confirm" data-dismiss="modal" 
    v-on:click="confirm()" 
    v-if="confirm"> 
    {{confirmLabel}} 
</button>