v-on="..." 是什么意思?VueJS 中的语法是什么意思? [英] What does v-on="..." syntax mean in VueJS?
问题描述
我遇到了 v-dialog 组件 的 Vuetify 示例，它具有作用域插槽称为激活器，定义如下:
<v-btn颜色="红色变亮-2"黑暗的v-on="on">点击我</v-btn>我了解 VueJS 文档中的作用域插槽以及解构插槽道具的概念，但我不不明白这个例子中 v-on="on" 的含义是什么.特别是当没有用 v-on 指令指定事件时，这意味着什么?
v-on 上的 VueJS 文档仅显示它与明确指定的事件名称结合使用(例如 v-on:click="...")，但没有解释仅将其用作 v-on="...".
有人可以在 Vuetify 示例中解释这种语法及其用法吗?
TLDR:
基本用法
<块引用><button v-on="{ mousedown: doThis, mouseup: doThat }"></button>]所以基本上 @click=..." 等于 v-on:click=..." 等于 v-on={click:...}"
vuetify 实现:
<块引用>genActivator () {const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {上: this.genActivatorListeners(),属性:this.genActivatorAttributes(),})) ||[]this.activatorNode = 节点返回节点}一些见解:
如果您想抽象组件并一次传递多个侦听器而不是编写多行赋值，这很有用.
考虑一个组件:
export default {数据() {返回 {在: {点击:console.log，上下文菜单:console.log},值:任何键值对"}}}<div><插槽名称=激活器":on="on":otherSlotPropName =值"><defaultComponent v-on="on";/></slot>给定上面的组件，您可以访问插槽属性并将它们传递给您的自定义组件:
<template v-slot:activator="{ on, otherSlotPropName }"><v-btn颜色=红色变亮-2"黑暗的v-on=开">点击我</v-btn><示例组件/> 有时在普通 javascript 中更容易看到它:
比较上面的组件 - 使用渲染函数而不是模板:
出口默认{数据() {返回 {在: {点击:console.log，上下文菜单:console.log},值:任何键值对"}},渲染(h){返回 h('div', [this.$scopedSlots.activator &&this.$scopedSlots.activator({上:this.on，otherSlotPropName: this.value})||h('默认组件', {听众:this.on}]}}在来源:
如果为空白 v-on=eventsObject" 方法 bindObjectListener 将被调用，导致将事件分配给 data..
这发生在 createComponent 作用域.
最后，listeners 作为 VNodeComponentOptions 传递并由 updateListeners.
Vue 扩展的地方 - 检查了 Vuetify 实现:
当考虑到可以加入和扩展 vue 实例时，可以说服自己任何组件都可以简化为更原子化的版本.
这就是 vuetify 在 e.g. 中使用的v-dialog 组件通过创建 激活混合.
现在可以追溯activatable:
const simplefiedActivable = {安装(){this.activatorElement = this.getActivator()},手表{激活元素(){//如果是 el?this.addActivatorEvents()}},方法: {addActivatorEvents(){this.listeners = this.genActivatorListeners()},genActivatorListeners(){返回 {点击: ...，鼠标输入:...，老鼠离开:...，}},<块引用>
genActivator () {const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {上: this.genActivatorListeners(),属性:this.genActivatorAttributes(),})) ||[]this.activatorNode = 节点返回节点},<代码> }}
有了上面的代码片段，剩下的就是将其实现到实际组件中:
//vuetify mixins 的使用/实现const baseMixins = mixins(可激活，...其他)const sympliefiedDialog = baseMixins.extend({...选项，渲染(h){const 孩子 = []children.push(this.genActivator())返回 h(root, ...options, children)}})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>
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?
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="...".
Can someone explain this syntax and its usage in the Vuetify example?
TLDR:
basic usage
<!-- object syntax (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>]
So basically @click="..." equals v-on:click="..." equals v-on="{click:...}"
TLDR:
vuetify implementation:
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.
Consider a component:
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 its easier to see it in plain javascript:
Comparing the component from above - with render function instead of template:
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
}
]
}
}
In the source:
In case of a blank v-on="eventsObject" the method bindObjectListener will be called resulting in the assignment of the events to data.on.
This happens in the createComponent scope.
Finaly the listeners are passed as VNodeComponentOptions and updated by updateListeners.
Where Vue extends - the Vuetify implementation inspected:
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.
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屋！
