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

Question

我正在尝试构建一个可重用的对话框，而无需使用任何 refs 与对话框进行交互。它有 2 个命名插槽。 激活器和内容。

activator 可以是点击时会打开对话框的任何元素(一些文本、图标等)。 content 是要在对话框中显示的内容。

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

PopupDialog.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

什么都不会发生，因为你不能像那样将事件监听器应用于插槽子项。

相反，您可以将一个方法作为插槽 Prop 传递给 activator 插槽，这样 children 就可以将 click 事件处理程序绑定(bind)到该方法:

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

demo