建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一文掌握vue3.2setup語法糖
前言
提示：Vue3.2 版本開始才能使用語法糖！
在 Vue3.0 中變量必須 return 出來，template中才能使用；而在 Vue3.2 中只需要在 script 標(biāo)簽上加上 setup 屬性，無需 return，template 便可直接使用，非常的香??！
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、如何使用setup語法糖
只需在 script 標(biāo)簽上寫上setup
代碼如下（示例）：
二、data數(shù)據(jù)的使用
由于 setup 不需寫 return，所以直接聲明數(shù)據(jù)即可
代碼如下（示例）：
三、method方法的使用
代碼如下（示例）：
四、watchEffect的使用
代碼如下（示例）：
五、watch的使用
代碼如下（示例）：
六、computed計算屬性的使用
computed計算屬性有兩種寫法(簡寫和考慮讀寫的完整寫法)
代碼如下（示例）：
七、props父子傳值的使用
子組件代碼如下（示例）：
{{props.name}}
父組件代碼如下（示例）：
八、emit子父傳值的使用
子組件代碼如下（示例）：
確定
父組件代碼如下（示例）：
九、獲取子組件ref變量和defineExpose暴露
即vue2中的獲取子組件的ref，直接在父組件中控制子組件方法和變量的方法
子組件代碼如下（示例）：
{{data }}
父組件代碼如下（示例）：
十、路由useRoute和useRouter的使用
代碼如下（示例）：
十一、store倉庫的使用
代碼如下（示例）：
十二、await的支持
setup 語法糖中可直接使用 await，不需要寫 async ， setup 會自動變成 async setup
代碼如下（示例）：
十三、provide 和 inject 祖孫傳值
父組件代碼如下（示例）：
子組件代碼如下（示例）：
當(dāng)前名稱：一文掌握vue3.2setup語法糖
轉(zhuǎn)載注明：http://www.5511xx.com/article/cdgipoe.html
