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屋!