vue3:setup的兩個註意點詳解

在vue2中

父組件傳屬性給子組件

在這裡插入圖片描述

子組件接收屬性

在這裡插入圖片描述

在這裡插入圖片描述

如果沒有接收,則需要在$attrs裡才能收到,缺點是沒有對類型作限制,以及使用的時候名字比較長

在這裡插入圖片描述

在這裡插入圖片描述

使用的時候名字比較長

在這裡插入圖片描述

vue2,父組件在子組件裡使用插槽

在這裡插入圖片描述

在這裡插入圖片描述

打印插槽裡的內容

在這裡插入圖片描述

如果父組件使用瞭子組件2個插槽

在這裡插入圖片描述

在這裡插入圖片描述

父組件在子組件使用具名插槽

在這裡插入圖片描述

在這裡插入圖片描述

在vue3中

setup的註意點

在這裡插入圖片描述

setup生命周期在beforecreated之前

在這裡插入圖片描述
在這裡插入圖片描述

setup可以拿到兩個參數,props和context

給子組件傳2個屬性

在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述

打印context

在這裡插入圖片描述

在這裡插入圖片描述

context.attrs

與vue2類似,如果隻聲明部分,則剩下的在attrs屬性裡面

在這裡插入圖片描述

在這裡插入圖片描述

context.emit

給子組件添加監聽事件

在這裡插入圖片描述

在這裡插入圖片描述

context.slot

在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述

如果傳一個具名插槽

在這裡插入圖片描述

或者(推薦這種)

在這裡插入圖片描述

打印

在這裡插入圖片描述

如果傳2個具名插槽

在這裡插入圖片描述

在這裡插入圖片描述

總結

在這裡插入圖片描述

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: