一.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)文档里面有详细的介绍
三.知识点总结
- 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…
