v-on ="..."是什么?VueJS中的语法含义? [英] What does v-on="..." syntax mean in VueJS?

问题描述

我遇到了 v-dialog组件的Vuetify示例，具有作用域范围的插槽称为激活器，定义如下:

I came across an Vuetify example for v-dialog component which has the scoped slot called activator, defined as follows:

  <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 指令指定事件时，这意味着什么?

I understand the purpose of scoped slots from VueJS docs and the concept of destructuring slot props but I don't understand what is the meaning of v-on="on" in this example. In particular what it means when event is not specified with v-on directive?

v-on 上的 VueJS文档仅显示它与明确指定的事件名称结合使用(例如 v-on:click ="..." )，但没有解释仅将其用作 v-on =...".

The VueJS docs on v-on only shows its usage in combination with event name explicitly specified (eg. v-on:click="...") but there is no explanation of just using it as v-on="...".

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

Can someone explain this syntax and its usage in the Vuetify example?

推荐答案

TLDR:

基本用法

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

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

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

      this.activatorNode = node

      return node
    }

---

一些见识:

---

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

---

Some insight:

---

It is useful if you want to abstract components and pass down multiple listeners at once instead of writing multiple lines of assignments.

考虑一个组件:

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>

鉴于上面的组件，您可以访问广告位属性并将其传递到您的自定义组件中:

Given the component above, you can access the slot properties and pass them into your custom component:

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

---

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" 的情况下，方法这发生在>> createComponent 作用域.

This happens in the createComponent scope.

最后， listeners 作为 VNodeComponentOptions 传递并由

Finaly the listeners are passed as VNodeComponentOptions and updated by updateListeners.

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

When taking into account that one can join and extend vue instances, one can convince himself that any component can be reduced to a more atomic version.

这是Vuetify在例如通过创建

This is what vuetify utilizes in the e.g. v-dialog component by creating a activator mixin.

现在，可以在

For now one can trace down the content of on mounted by the activatable:

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

  }
}

在上面的代码段中，剩下的就是将其实现到实际组件中了:

With above snippet all there is left is to implement this into the actual component:

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

这篇关于v-on ="..."是什么?VueJS中的语法含义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！