switch組件

1.外觀

image.png

2.API設(shè)計(jì)

image.png

3. 實(shí)現(xiàn)過程

image.png

4.遇到報(bào)錯(cuò)

image.png

3種解決方式：

1.點(diǎn)一下shims-vue.d.ts再返回回來
2.在switch.vue中加script標(biāo)簽， 并加上export default{}
3.刪掉這句話重新復(fù)制過來

總結(jié)：

這是插件的錯(cuò)，不是代碼的問題

5.css的transition動(dòng)畫的使用

image.png

這個(gè)意思是說，如果left有變化， 就用1s來完成他的變化

6.寫完之后做什么

image.png

7.子組件向父組件傳值以及接收

子組件向父組件傳值

image.png

用context.emit來傳值， 第一個(gè)參數(shù)是事件名，第二個(gè)是要傳遞的值

image.png

父組件接收，其中$event是子組件傳遞過來的值， 也可以用@input="(event)=>{}"（但是這樣寫不是麻煩么）

一張圖

image.png

8. vue3 v-model雙向綁定用法

子組件向外觸發(fā)

image.png

父組件接收

image.png

可以簡寫為這樣 ↓

image.png

vue2 的 v-bind.sync知識(shí)

image.png

總結(jié)

image.png

文檔： http://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax

9.一個(gè)好用的截圖工具

snipaste
截圖-按住shift-按c 就會(huì)復(fù)制了顏色

this.$emit

image.png

vue3中可以使用this.$emit 只不過必須在methods里寫， 但是由于vue3中提供了setup函數(shù)， 在這個(gè)函數(shù)里寫的方法最后直接return出來， 就 ===method中定義的函數(shù)了， 所以以后再vue3中不用寫method了