vue3-造轮子【1】-switch组件
2020-10-13 本文已影响0人
zzyo96
switch组件
1.外观
image.png
2.API设计
image.png
3. 实现过程
image.png
4.遇到报错
image.png
3种解决方式：
1.点一下shims-vue.d.ts再返回回来
2.在switch.vue中加script标签， 并加上export default{}
3.删掉这句话重新复制过来
总结：
这是插件的错，不是代码的问题
5.css的transition动画的使用
image.png
这个意思是说，如果left有变化， 就用1s来完成他的变化
6.写完之后做什么
image.png
7.子组件向父组件传值以及接收
子组件向父组件传值
image.png
用context.emit来传值， 第一个参数是事件名，第二个是要传递的值
image.png
父组件接收，其中$event是子组件传递过来的值， 也可以用@input="(event)=>{}"（但是这样写不是麻烦么）
一张图
image.png
8. vue3 v-model双向绑定用法
子组件向外触发
image.png
父组件接收
image.png
可以简写为这样 ↓
image.png
vue2 的 v-bind.sync知识
image.png
总结
image.png
文档： http://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax
9.一个好用的截图工具
snipaste
截图-按住shift-按c 就会复制了颜色
this.$emit
image.png
vue3中可以使用this.$emit 只不过必须在methods里写， 但是由于vue3中提供了setup函数， 在这个函数里写的方法最后直接return出来， 就 ===method中定义的函数了， 所以以后再vue3中不用写method了
