Vue3造轮子--Switch组件

theme: condensed-night-purple

一.Switch 组件

1.有什么问题？

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

解决：添加 value 属性， 添加 input 事件

html  <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)文档里面有详细的介绍

三.知识点总结

• 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：https://gitee.com/boheweb/mint-ui