Question

我在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

自Vue 2.4起，Vue组件具有$listeners属性。

包含父范围的v-on事件侦听器（不带.native 改性剂）。

记录在案here。您可以通过检查$listeners属性来确定父级是否正在侦听特定事件。

<小时/> 原始答案

对于某个组件来说，通过它来确定事物并不是一种好的做法。

我建议您使用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>

是否可以从Vue.js 2中的组件访问事件侦听器

2 个答案: