Wei Zhang's Blog


  • 首页

  • 标签

  • 分类

  • 搜索

Vue3深入组件-自定义事情

发表于 2020-12-22 | 分类于 Vue3
字数统计: 1.5k 字 | 阅读时长 ≈ 7 分钟

事件名

不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

1
2
3
this.$emit('myEvent')
<!-- 没有效果 -->
<my-component @my-event="doSomething"></my-component>

DOM 模板会自动转换事件名为全小写 (因为 HTML 是大小写不敏感的),所以 @myEvent 将会变成 @myevent——导致 myEvent 不可能被监听到。

因此,我们推荐你始终使用 kebab-case 的事件名。

阅读全文 »

Vue3深入组件-处理边界情况

发表于 2020-12-22 | 分类于 Vue3
字数统计: 619 字 | 阅读时长 ≈ 2 分钟

前言

这里记录的都是和处理边界情况有关的功能,即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明,所以当你使用每个功能的时候请稍加留意。

阅读全文 »

Vue3深入组件-非 Prop 的 Attribute

发表于 2020-12-22 | 分类于 Vue3
字数统计: 649 字 | 阅读时长 ≈ 3 分钟

前言

一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。

阅读全文 »

Vue3深入组件-Props

发表于 2020-12-22 | 分类于 Vue3
字数统计: 1k 字 | 阅读时长 ≈ 4 分钟

Prop 类型

  1. 字符串数组形式

    1
    props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
  2. 对象形式

    阅读全文 »

Vue2迁移-v-model

发表于 2020-12-17 | 分类于 Vue3
字数统计: 1.1k 字 | 阅读时长 ≈ 4 分钟

概览

就变化内容而言,此部分属于高阶内容:

  • 非兼容:用于自定义组件时,v-model prop 和事件默认名称已更改:
    • prop:value -> modelValue;
    • event:input -> update:modelValue;
  • 非兼容:v-bind 的 .sync 修饰符和组件的 model 选项已移除,可用 v-model 作为代替;
  • 新增:现在可以在同一个组件上使用多个 v-model 进行双向绑定;
  • 新增:现在可以自定义 v-model 修饰符。

更多信息,请见下文。

阅读全文 »
<1…636465…191>

一期一会

951 日志
46 分类
68 标签
GitHub E-Mail
© 2017 — 2022 Wei Zhang | Site words total count: 684.2k
 本站访客数 人  本站总访问量 次