如何在 VueJS 中处理插槽的 onClick 事件

Question

我正在尝试构建一个可重用的对话框，而不必使用任何refs与对话框交互的东西。它有 2 个命名插槽。activator和content。

activator可以是单击时将导致对话框打开的任何元素（某些文本、图标等）。content是要在对话框中显示的内容。

我认为我已经正确创建了所有内容，但是单击处理程序似乎无法在该activator插槽上工作。该对话框不显示。参见下面的代码：

弹出对话框.vue

<template>
  <div>
    <div>
      <slot @click="dialog = true" name="activator" />
    </div>

    <v-dialog
      v-model="dialog"
      persistent
      max-width="400"
    >
      <slot name="content" />
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: "PopupDialog",
  data: () => ({
    dialog: false,
  }),
};
</script>

然后我尝试使用这样的组件：

  <PopupDialog>
    <template v-slot:activator>
      <span>
        Add Member
      </span>
    </template>

    <template v-slot:content>
      <span>
        Content to show in dialog
      </span>
    </template>
  </PopupDialog>

当我单击跨度文本时没有任何反应，这是为什么？是否无法在插槽上使用事件侦听器？我怎样才能完成这项工作？

Answer 1

什么也没有发生，因为您无法将事件侦听器应用于这样的插槽子项。

相反，您可以将一个方法作为 slot prop 传递给该activator槽，以便子级可以将click事件处理程序绑定到该方法：

<slot name="activator" :onClick="onClick" />

export default {
  name: 'PopupDialog',
  methods: {
    onClick() {
      this.dialog = true
    }
  }
}

然后像这样使用它：

<PopupDialog>
  <template v-slot:activator="{ onClick }">
    <span @click="onClick"> Add Member </span>
  </template>
</PopupDialog>

演示