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

Question

我遇到了 v-dialog component 的 Vuetify 示例它有一个名为 activator 的作用域插槽，定义如下:

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

我了解 scoped slots from VueJS docs 的目的和 destructuring slot props 的概念但我不明白这个例子中 v-on="on" 是什么意思。特别是当未使用 v-on 指令指定事件时，这意味着什么？

VueJS docs on 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
    }

---

一些见解:

---

如果您想抽象组件并一次传递多个监听器而不是编写多行分配，这将很有用。

---

考虑一个组件:

export default {

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

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

鉴于上面的组件，您可以访问插槽属性并将它们传递到您的自定义组件中:

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

---

有时在普通 javascript 中更容易看到它:

比较上面的组件 - 与 render function而不是模板:

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

最后，listeners 作为 VNodeComponentOptions 传递并由 updateListeners 更新.

---

Vue 扩展的地方 - 检查 Vuetify 实现:

当考虑到可以加入和扩展 vue 实例时，可以说服自己任何组件都可以简化为更原子的版本。

这就是 vuetify 在例如v-dialog 组件通过创建 activator mixin .

现在可以追踪由 activatable 安装的 on 的内容:

const simplyfiedActivable = {

  mounted(){
    this.activatorElement = this.getActivator()
  },
  watch{
    activatorElement(){
      // if is el?
      this.addActivatorEvents()
    }
  },
  methods: {
    addActivatorEvents(){
      this.listeners = this.genActivatorListeners()
    },
    genActivatorListeners(){
      return {
        click: ...,
        mouseenter: ...,
        mouseleave: ...,
      }
    },

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

---