vue3-造轮子【1】-switch组件

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了