v-on =“ ...”语法在VueJS中是什么意思？

Question

我遇到了v-dialog组件的Vuetify示例，该示例 具有称为activator的作用域插槽，定义如下：

  <template v-slot:activator="{ on }">
    <v-btn
      color="red lighten-2"
      dark
      v-on="on"
    >
      Click Me
    </v-btn>
  </template>

我了解了VueJS文档中作用域插槽的用途以及解构插槽道具的概念，但我不理解v-on="on"此示例中的含义。特别是当未使用v-on指令指定事件时，这意味着什么？

在上VueJS文档v-on只能说明其在组合使用与事件名称明确指定（例如v-on:click="..."），但也没有只使用它作为解释v-on="..."。

有人可以在Vuetify示例中解释此语法及其用法吗？

Answer 1

TLDR：

基本用法

<!-- object syntax (2.4.0+) --> 
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>]

所以基本上@click="..."等于v-on:click="..."等于v-on="{click:...}"

TLDR：

验证实现：

genActivator () {
      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
        on: this.genActivatorListeners(),
        attrs: this.genActivatorAttributes(),
      })) || []

      this.activatorNode = node

      return node
    }

一些见解：

如果要抽象化组件并一次向下传递多个侦听器，而不是编写多行分配，则很有用。

考虑一个组件：

<!-- object syntax (2.4.0+) --> 
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>]

genActivator () {
      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
        on: this.genActivatorListeners(),
        attrs: this.genActivatorAttributes(),
      })) || []

      this.activatorNode = node

      return node
    }

给定上面的组件，您可以访问插槽属性并将其传递到自定义组件中：

export default {

  data() {
    return {
      on: {
        click: console.log,
        contextmenu: console.log
      },
      value: "any key value pair"
    }
  }
}

Somethimes在普通javascript中更易于查看：

从上方比较组件-使用渲染功能而不是模板：

export default {

  data() {
    return {
      on: {
        click: console.log,
        contextmenu: console.log
      },
      value: "any key value pair"
    }
  },
  render(h){

    return h('div', [
      this.$scopedSlots.activator &&
      this.$scopedSlots.activator({
        on: this.on,
        otherSlotPropName: this.value
      })
      || h('defaultComponent', {
        listeners: this.on
      }
    ]
  }
}

在源中：

如果为空白v-on="eventsObject"，bindObjectListener则将调用方法，将事件分配给data.on。

这发生在createComponent范围内。

最后，listeners传递为VNodeComponentOptions并由进行更新updateListeners。

Vue的扩展范围-检查了Vuetify实施：

考虑到可以加入和扩展vue实例时，人们可以说服自己将任何组件简化为更基本的版本。

这是vuetify v-dialog通过创建一个在eg 组件中利用的activator mixin。

现在，可以通过以下命令跟踪on挂载的内容activatable：

<template>
  <div>
    <slot name="activator" :on="on" :otherSlotPropName="value" >
      <defaultComponent v-on="on" />
    </slot>
  </div>
</template>

genActivator () {
      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
        on: this.genActivatorListeners(),
        attrs: this.genActivatorAttributes(),
      })) || []

      this.activatorNode = node

      return node
    },

  }
}

使用上面的代码片段，剩下的就是将其实现到实际组件中：

// vuetify usage/implemention of mixins 
const baseMixins = mixins(
  Activatable,
  ...other
)

const sympliefiedDialog = baseMixins.extend({
  ...options,
  render(h){

    const children = []
    children.push(this.genActivator())
    return h(root, ...options, children)
  }
})