Vue3造轮子--Switch组件

136 阅读1分钟

一.Switch 组件

1.有什么问题?

最大的问题:外界无法知道当前状态是开还是关

解决:添加 value 属性, 添加 input 事件

  <Switch :value="xxx" @input="x = $event"/>

2.如何让Switch 接受 value

props 即可

3.如何让Switch 发出 input 事件

context.emit('input',xxx)即可

目前不考虑,传入多个参数,防止自己晕, 后续在扩展了解

4.补充

  • 为什么事件名是 input 可以改成其他名字,用 input 是个人习惯

  • $event 是个什么玩意

    • 是尤雨溪创造的一个变量,不喜欢你就去找尤雨溪
    • $event的值是emit的第二个参数
    • emit(事件名,事件参数)
    • 不喜欢你就去找尤雨溪理论,这是他规定的
  • 总结

    • 编程这行很多的规矩都是人为规定
    • 这些规定往往都是经过千锤百炼的好规定
    • 也就是人们所说的**「经验」**

二.Vue3 的 v-model

  • 要求

    • 属性名任意,假设为x
    • 事件名必须为 update:x
  • 效果 <Switch :value="y" @update:value="y = $event" />

  • 可以简写为

  • <Switch v-model:value="y" /> 文档 这是Vue2到Vue 3的一个大变动(breaking change)文档里面有详细的介绍

image.png

三.知识点总结

  • value="true" 和 :value="true" 的区别
  • 使用CSS transition 添加过渡动画
  • 使用ref 创建内部数据
  • 使用 :value 和 @input 让父子组件进行交流(组件通信)使用 $event
  • 使用 v-model
  • 框架就是把你框起来:不准改props

四.Vue2和 Vue3 的区别

  • 新v-model代替以前的 v-model 和.sync
  • 新增context.emit,与 this.$emit 作用相同

已上传到Gitee:gitee.com/boheweb/min…