如何将 v-on/v-bind 传递给组件

Question

我正在使用 Vuetify 菜单和按钮组件。我试图将菜单和属性从 SomeFile.vue 模板中的激活器插槽传递到 MyCustomButtonTemplate.vue 文件中的 v-btn，但我不知道该怎么做。有谁知道如何正确传递这些值？一个简单的例子如下所示

SomeFile.vue

<v-menu offset-y>
  <template v-slot:activator="{ on: menu, attrs }">
    <MyCustomButtonTemplate v-on="menu" v-bind="attrs">
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>Some Title</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

MyCustomButtonTemplate.vue

<template>
  <v-tooltip top>
    <template #activator="{ on: tooltip }">
      <v-btn v-on="{...tooltip, ...menu}" v-bind="attrs">Blah</v-btn>
    </template>
    <span>Some tooltip</span>
  </v-tooltip>
</template>

Answer 1

首先你需要在自定义组件中将 inheritAttrs 设置为 false，因为默认情况下 vue for bindings 将作为正常的 HTML 属性应用于子组件的根元素。

<script>
export default {
  inheritAttrs: false,
}
</script>

然后您可以在自定义组件中的元素上应用属性和侦听器。

<template>
  <v-tooltip top>
    <template #activator="{ on: tooltip }">
      <v-btn v-on="{ ...tooltip, ...$listeners }" v-bind="$attrs">Blah</v-btn>
    </template>
    <span>Some tooltip</span>
  </v-tooltip>
</template>

顺便说一句，您没有将 menu 和 attrs 定义为道具，但您使用它就像在组件中一样。我们在 vue 中使用的大多数保留方法和属性都以 $ 开头。当然，这仅适用于选项 API.

Answer 2

您可以访问 $listeners 和 $attrs 对象中的组件事件侦听器和属性。您还可以通过解构它们将它们传递给具有额外事件处理程序和侦听器的子级。

<v-tooltip top>
    <template v-slot:activator="{ on }">
        <v-btn v-on="{ ...on, ...$listeners }" v-bind="$attrs">Blah</v-btn>
    </template>
    <span>Some tooltip</span>
</v-tooltip>

这是工作codesandbox

如何将 v-on/v-bind 传递给组件

How do I pass v-on/v-bind to component

vue.js

vuejs2

vuetify.js