Vue2.6.0 框架使用总结
1. 自定义事件
不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:
this.$emit('myEvent')
则监听这个名字的 kebab-case 版本是不会有任何效果的:
<!-- 下面两个监听都没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>
<my-component v-on:myEvent="doSomething"></my-component> //vue2.6.0以下(不包括vue2.6.0)自动转为 v-on:myevent
vue2.6.0以下(不包括vue2.6.0)中,事件监听不同于组件
和 prop
,事件名不会被用作一个 JavaScript 变量名或 property 名,所以就没有理由使用 camelCase了。并且 v-on
事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent
将会变成 v-on:myevent
——导致 myEvent
不可能被监听到。
我对理解, HTML是大小写不敏感的,所以所有字母会自动转为小写。而vue2.6.0的注册的事件名(例子中的 myEvent ),不会由 camelCase 变为全小写的,所以经转换后二者对应不上,导致事件无法被监听到。因此我们注册事件时候最好使用kebab-case,比如
this.$emit('my-event')
,监听事件的时候也使用kebab-case 形式书写。但是
在vue3中
,vue中注册的事件如果使用camelCase 会和props中的prop一样,会自动转换为kebab-case,形式。 (注意不是由camelCase转为小写,这点和HTML不一样!!!)
因此,我们推荐你始终使用 kebab-case 的事件名。
2. 在vue中 给组件传不在props接收中的值。
<component
:is="field.fieldType"
:key="index"
:ref="field.name"
:label="field.label"
:render="field.render"
:value="formDataAction(formData, field.name)"
:multiple="field.multiple"
:picker-options="field.pickerOptions"
:format="field.format"
:date="field.date"
:maxlength="field.maxlength"
:type="field.type"
:area-length="field.areaLength"
v-bind="field"
:options="field.options"
:optionsurl="field.optionsurl"
:disabled="field.disabled"
@input="updateForm"
@change="changeForm"
/>
props: ['placeholder', 'label', 'type', 'name', 'value', 'disabled', 'maxlength', 'areaLength']。
上面的有些值未在props中定义。所以这些未定义的值会出现在this的$attr属性上,在props中定义的属性会出现在$props属性上, 在组件中使用 $attr中的值,需要this.$attr. 而使用props中的值直接this 就可以取到,应该是对props的值做了一些数据代理。
3.事件处理接收多个参数
接收一个参数
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
接受多个参数(使用 $event0,$event1,$event2
)
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event0,$event1,$event2)">
Submit
</button>