是否有可能從組件訪問事件偵聽器在Vue.js 2

我在Vue.js自定義組件（2）：是否有可能從組件訪問事件偵聽器在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中的組件是否附加特定偵聽器來進行條件渲染？

謝謝。

來源

2017-04-23 yavuzkavus

對於一個組件來說，通常不是很好的做法來確定事情。

我會建議，而不是你有一個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。

來源

2017-04-23 17:52:53 Bert

感謝伯特。是的，這是一種選擇，我只是好奇另一種方法是否可行。據我瞭解，事實並非如此。 – yavuzkavus

@yavuzkavus從技術上講，這是可能的，但你必須檢查Vue的內部API。在組件中，'_events'屬性將列出組件上的事件處理程序。你可以檢查是否有'confirm'的處理程序。 – Bert

@yavuzkavus我爲此添加了一個示例，但我會推薦回調方法。 – Bert

您需要將您的函數與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>

來源

2017-04-23 18:05:15 dfsq

他沒有在問題中傳遞'confirm'，他有一個使用'@ handler'語法的事件監聽器。 – Bert

是否有可能從組件訪問事件偵聽器在Vue.js 2

回答

相關問題