Vue2.6.0 框架使用总结

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>