Javascript v-on=”是什么意思&引用；VueJS中的语法含义？

我遇到了一个Vuetify示例，其作用域插槽名为activator，定义如下：

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

点击我

我理解的目的和概念，但不理解本例中

v-on=“on”

的含义。特别是当未使用

v-on

指令指定事件时，它意味着什么

仅显示它与显式指定的事件名称结合使用（例如，

v-on:click=“…”

），但没有解释仅将其用作

v-on=“…”

）

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

基本用法

---

一些见解：

---

如果您希望抽象组件并同时传递多个侦听器，而不是编写多行赋值，那么它非常有用

---

考虑一个组件：

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

导出默认值{
数据（）{
返回{
关于：{
单击：console.log，
上下文菜单：console.log
},
值：“任意键值对”
}
}
}

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

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

点击我

---

有时在普通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”

为空，将调用该方法，从而将事件分配给

data.on

这种情况发生在家庭中

最后，

侦听器

作为

VNodeComponentOptions

传递并由更新

---

Vue扩展的地方—检查Vuetify实现： 当考虑到可以加入和扩展vue实例时，可以说服自己任何组件都可以简化为更原子的版本

这就是vuetify通过创建

目前，您可以追溯到由以下用户安装的上的

的内容：

const SimpleFiedActivable={
安装的（）{
this.activationElement=this.getActivator（）
},
监视{
激活元素（）{
//如果是艾尔？
this.addActivatorEvents（）
}
},
方法：{
addActivatorEvents（）{
this.listeners=this.genActivatorListeners（）
},
genActivatorListeners（）{
返回{
单击：。。。，
鼠标指针：。。。，
穆斯莱夫：。。。，
}
},

在上面的代码片段中，只剩下将其实现到实际组件中：

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

：@Estradiaz请将其作为answer@adiga这就是答案。然而，OP要求解释在上述示例中如何使用它，其中除了在activator中之外，在任何地方都没有定义
on
，并且在
v-on
中使用
@briosheje
on
可能是该组件的
数据的属性？（不太熟悉vue btw）@adiga我也不熟悉，但我认为一个指向文档的简单链接实际上并没有帮助，因为如果你看一看这个示例，仍然不清楚“on”在该上下文中是如何工作的。我仍然不明白：/
  }
}

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