@shixinde/vuepress-theme-init
Version:
350 lines • 74.4 kB
HTML
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.14" />
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html,
body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme')
const systemDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true)
}
</script>
<link rel="icon" href="/favicon.ico"><title>Guoguo-notes</title><meta name="description" content="袁果锅笔记">
<link rel="preload" href="/guoguo-notes/assets/style-35EaXqtH.css" as="style"><link rel="stylesheet" href="/guoguo-notes/assets/style-35EaXqtH.css">
<link rel="modulepreload" href="/guoguo-notes/assets/app-Dx9bNbfq.js"><link rel="modulepreload" href="/guoguo-notes/assets/jsx tsx 笔记.html-BtuYzmC-.js">
<link rel="prefetch" href="/guoguo-notes/assets/index.html-D6hY1Pr0.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React.html-DpSypgmq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java jdk 管理.html-UyxKEztz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/lingzhi.html-DrDRjKEH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/临时使用.html-D81L-GXB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/新公司.html-Bp4Oxj5H.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目架构升级版.html-CpJwv32O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/风扬小记.html-BTKAsyQB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python代码片段.html-3rxV2C-F.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python笔记.html-DfxyADl3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/AjaxResult.html-CcB1SHt9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 基础.html-C0Mw79YJ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 注解.html-DMhJ2pfz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MyBatis Plus.html-DXaupZNq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MySQL完整.html-E-VKR_Bm.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Mybatis 语法.html-BtyLUnj2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/StringBoot.html-IewOkkS1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea 插件.html-yFlZz-2q.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea快捷键.html-CI1PJIaN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java 代码片段.html-mGveOiyh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/mySql.html-mha8lKTS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页插件使用.html-BpMDhHym.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目初始化.html-TexbaFDo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/02_react案例_笔记.html-BzISG9Ro.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/03_react-router_教程.html-CiEuDnOl.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/04_react-UI_教程.html-CptRBAn1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/05_redux笔记.html-BBtVc0mQ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 笔记.html-BPeqw1PX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 项目配置流程.html-BXl6Ye6r.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷React扩展笔记.html-CCxyveD2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷react-redux笔记.html-DYzvAaxv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-3ZVA3kn7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element Plus --vue3.0.html-DXuv_b9N.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element ui 笔记.html-sVqlVk_V.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Taro.html-CA8JB-of.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 代码片段.html-DKeMa5iO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 全局封装 main.js.html-D9vo-8hy.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 笔记.html-DGHKF3_K.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3 .html--oEgCjOt.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3_Element Plus.html-BVAoHXff.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/element plus 本地启动.html-CgsgPmvg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 代码片段.html-G1ShCdaZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp笔记.html-ok2vMZAr.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite 笔记.html-D-EBkJ0C.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite手写插件.html-Cggy24Oh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vue.js 下载文件.html-B1uCoFDS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vueuse笔记.html-DS6eTZ6y.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vxe-table笔记.html-yUGgZHig.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/代码片段 - 解析数学公式.html-DdcBDyRv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用插件.html-CZkTIVvE.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/汇智腾远笔记.html-moZCMq7M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/视频播放插件.html-BcEFDEgf.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS笔记.html-fAv9dNNH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Echarts.html-Cge55fid.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git 代码管理.html-B63UoB0T.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Html 笔记.html--NntXjWX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/TypeScript.html-D-Qjaudh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/axios 请求拦截.html-D1TCv2Mj.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-Ka8coTuF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/npm.html-B-EmKZd8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/sh 笔记.html-B3G_4KZW.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/valibot校验学习.html-BBH2-2ZH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/云开发教程.html-DRtT7hW1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/公共API接口.html-p1pxjePH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/小程序笔记.html-BJbLxiMh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/插件库.html-CZ-6S-Qp.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器.html-BNfIswB8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器部署教学.html-T1qkai4O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/浏览器px to rem适配.html-DPzD4TkF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/登录逻辑.html-D5sdqJbb.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/网站配色.html-B_2Exge9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/跨域代理.html-BYkKrkY7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/接入AI.html-DVRrF1MA.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/查看 编辑对话框组件.html-zEZcOjWH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/简易电影选座.html-TuQVklis.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-1f6p3-c_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS--common.html-D0ck7nMZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/ES6.html-wEFap9Uq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git提交.html-CHssaRZs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Js获取当前时间的方法.html-BRnoMyWs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-App笔记.html-BUy_Af_M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-app API.html-CAzH1d66.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uniapp-插件.html-DB8eOvmu.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/VueX 笔记.html-BrvLUsYq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js函数封装.html-Cc5d9Th4.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-CIq-xlv8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uView基本使用.html-CCsyyvNN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp 引入组件库.html-BnVxGutO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用正则表达式.html-AS2O_lcX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/界面类.html-BEOhA9U_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/笔记.html-DcjAVSiK.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/组件封装.html-BF9gShal.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/编程逻辑整理.html-CZRD3wTo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/调用接口.html-DniVQnty.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SSH 配置.html-9u6Q-DHg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Editor.html-CfSL24h8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页组件.html-DcRa4Q6p.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/拖拽组件.html-D6yjy7lX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-LinbGCk2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/GIt 代码提交规范及步骤.html-w7f6_4N9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/命名_ 开发期间的命名规范.html-DhnWSrsL.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/大佬项目组织规范.html-B32Km5um.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/重要_框架 - 初始化项目约束.html-Sw9ULLk3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/404.html-BZdzN0T2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SearchResult-DqPIHYal.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon"><!--[--><header class="vp-navbar"><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/guoguo-notes/"><!----><span class="vp-site-name" aria-hidden="true">Guoguo-notes</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><button class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!--[--><button type="button" class="search-pro-button" aria-label="搜索"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">搜索</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar"><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">vue笔记及周边生态 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Element%20Plus%20--vue3.0.html" aria-label="1. Element Plus --vue3.0.md"><!---->1. Element Plus --vue3.0.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Element%20ui%20%E7%AC%94%E8%AE%B0.html" aria-label="2. Element ui 笔记.md"><!---->2. Element ui 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Taro.html" aria-label="3. Taro.md"><!---->3. Taro.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5.html" aria-label="4. Vue 代码片段.md"><!---->4. Vue 代码片段.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E5%85%A8%E5%B1%80%E5%B0%81%E8%A3%85%20main.js.html" aria-label="5. Vue 全局封装 main.js.md"><!---->5. Vue 全局封装 main.js.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="6. Vue 笔记.md"><!---->6. Vue 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue3%20.html" aria-label="7. Vue3 .md"><!---->7. Vue3 .md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue3_Element%20Plus.html" aria-label="8. Vue3+Element Plus.md"><!---->8. Vue3+Element Plus.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/element%20plus%20%E6%9C%AC%E5%9C%B0%E5%90%AF%E5%8A%A8.html" aria-label="9. element plus 本地启动.md"><!---->9. element plus 本地启动.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/jsx%20tsx%20%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5.html" aria-label="10. jsx tsx 代码片段.md"><!---->10. jsx tsx 代码片段.md<!----></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/jsx%20tsx%20%E7%AC%94%E8%AE%B0.html" aria-label="11. jsx tsx 笔记.md"><!---->11. jsx tsx 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/uniapp%E7%AC%94%E8%AE%B0.html" aria-label="12. uniapp笔记.md"><!---->12. uniapp笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vite%20%E7%AC%94%E8%AE%B0.html" aria-label="13. vite 笔记.md"><!---->13. vite 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vite%E6%89%8B%E5%86%99%E6%8F%92%E4%BB%B6.html" aria-label="14. vite手写插件.md"><!---->14. vite手写插件.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vue.js%20%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6.html" aria-label="15. vue.js 下载文件.md"><!---->15. vue.js 下载文件.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vueuse%E7%AC%94%E8%AE%B0.html" aria-label="16. vueuse笔记.md"><!---->16. vueuse笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vxe-table%E7%AC%94%E8%AE%B0.html" aria-label="17. vxe-table笔记.md"><!---->17. vxe-table笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%20-%20%E8%A7%A3%E6%9E%90%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F.html" aria-label="18. 代码片段 - 解析数学公式.md"><!---->18. 代码片段 - 解析数学公式.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6.html" aria-label="19. 常用插件.md"><!---->19. 常用插件.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E6%B1%87%E6%99%BA%E8%85%BE%E8%BF%9C%E7%AC%94%E8%AE%B0.html" aria-label="20. 汇智腾远笔记.md"><!---->20. 汇智腾远笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E6%8F%92%E4%BB%B6.html" aria-label="21. 视频播放插件.md"><!---->21. 视频播放插件.md<!----></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h2 id="前言" tabindex="-1"><a class="header-anchor" href="#前言"><span>前言</span></a></h2><blockquote><p>可以参考项目 <a href="https://gitee.com/small_bud_star/vue3-tsx-todo" target="_blank" rel="noopener noreferrer">星星在线/vue3-tsx-todo - 码云 - 开源中国</a></p><p>笔记参考 <a href="https://zhuanlan.zhihu.com/p/563203507" target="_blank" rel="noopener noreferrer">vue3+tsx开发语法详解 - 知乎</a></p></blockquote><h2 id="安装jsx库" tabindex="-1"><a class="header-anchor" href="#安装jsx库"><span><strong>安装JSX库</strong></span></a></h2><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">pnpm install @vitejs/plugin-vue-jsx -D</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>安装完之后在<code>vite.config.ts</code>进行插件使用，代码如下：</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">import { defineConfig } from "vite";</span>
<span class="line">import vue from "@vitejs/plugin-vue";</span>
<span class="line">import vueJsx from "@vitejs/plugin-vue-jsx";</span>
<span class="line"></span>
<span class="line">export default defineConfig({</span>
<span class="line"> plugins: [</span>
<span class="line"> vue(),</span>
<span class="line"> vueJsx() //插件使用</span>
<span class="line"> ],</span>
<span class="line">});</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后就可以愉快的使用<code>TSX</code>来开发<code>Vue</code>组件了，下面主要说一下<code>SFC</code>和<code>TSX</code>的部分区别。</p><h2 id="基本语法对照-sfc" tabindex="-1"><a class="header-anchor" href="#基本语法对照-sfc"><span><strong>基本语法对照 SFC</strong></span></a></h2><h3 id="definecomponent-和-setup" tabindex="-1"><a class="header-anchor" href="#definecomponent-和-setup"><span><strong>defineComponent 和 setup</strong></span></a></h3><p>SFC方式结构固定：template、script、style</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line"><template></span>
<span class="line"> <div>Hello World</div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line"><script setup lang="ts"></span>
<span class="line"></script></span>
<span class="line"></span>
<span class="line"><style scope></span>
<span class="line"></style></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>TSX方式就完全是一个ts文件的写法，没有模板template和样式style</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">import { defineComponent } from 'vue';</span>
<span class="line"></span>
<span class="line">export default defineComponent({</span>
<span class="line"> setup() {</span>
<span class="line"> // Todo</span>
<span class="line"> return () => <div>Hello World</div></span>
<span class="line"> }</span>
<span class="line">})</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>setup中函数的返回值有多种方式，可以直接返回html：<code><div>Hello World</div></code>，这个适合结构简单的页面，如果返回比较多，可以使用如下方式：</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">import { defineComponent } from 'vue';</span>
<span class="line"></span>
<span class="line">export default defineComponent({</span>
<span class="line"> setup() {</span>
<span class="line"> // Todo</span>
<span class="line"> return () => (</span>
<span class="line"> <div></span>
<span class="line"> <div>Child1</div></span>
<span class="line"> <div>Child2</div></span>
<span class="line"> <div>Child3</div></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line">})</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果是多节点，可以使用空符号包裹</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">return () => (</span>
<span class="line"> <></span>
<span class="line"> <div>Child1</div></span>
<span class="line"> <div>Child2</div></span>
<span class="line"> <div>Child3</div></span>
<span class="line"> </></span>
<span class="line">)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在以上的方式中我们把除了布局以外的逻辑都写在<code>//Todo</code>部分，但是有时候我们需要做一些按条件渲染的逻辑，那么也可以在<code>return</code>里加处理逻辑，例如：</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">import { defineComponent } from 'vue';</span>
<span class="line"></span>
<span class="line">export default defineComponent({</span>
<span class="line"> setup() {</span>
<span class="line"> // Todo</span>
<span class="line"> return () => {</span>
<span class="line"> if (something) {</span>
<span class="line"> return (</span>
<span class="line"> <div></span>
<span class="line"> <div>Child1</div></span>
<span class="line"> <div>Child2</div></span>
<span class="line"> <div>Child3</div></span>
<span class="line"> </div></span>
<span class="line"> )</span>
<span class="line"> } else {</span>
<span class="line"> return (</span>
<span class="line"> <div>noChild</div></span>
<span class="line"> )</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line">})</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这种方式类似<code>v-if</code>，但是和<code>v-if</code>还是有点区别，<code>v-if</code>可以作用在更小的范围，而这种方式只适合整个组件的条件渲染，这个可能不好理解，在下面<code>v-if</code>的使用中我们会看到区别。</p><h2 id="v-if" tabindex="-1"><a class="header-anchor" href="#v-if"><span><strong>v-if</strong></span></a></h2><p>使用条件判断语句来实现v-if的功能，一般是<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E4%B8%89%E7%9B%AE%E8%BF%90%E7%AE%97%E7%AC%A6&zhida_source=entity" target="_blank" rel="noopener noreferrer">三目运算符</a></p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><template></span>
<span class="line"> <div></span>
<span class="line"> <span v-if="condition ">A</span></span>
<span class="line"> <span v-else>B</span></span>
<span class="line"> </div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">return () => (</span>
<span class="line"> <div></span>
<span class="line"> {</span>
<span class="line"> condition ? <span>A</span> : <span>B</span></span>
<span class="line"> }</span>
<span class="line"> </div></span>
<span class="line">)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这里你可以看到<code>v-if</code>的使用和我们上面的条件返回不一样，区别就是整体渲染没有大的变化，只是其中部分地方要按条件显示。</p><h3 id="v-bind" tabindex="-1"><a class="header-anchor" href="#v-bind"><span><strong><a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=v-bind&zhida_source=entity" target="_blank" rel="noopener noreferrer">v-bind</a></strong></span></a></h3><p>绑定变量，也就是简写的:冒号，修改方式就是将冒号去掉，把双引号改为大括号</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><template></span>
<span class="line"> <div :class="c_class" :style="c_style" :custom="custom"></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">return () => (</span>
<span class="line"> <div class={c_class} style={c_style} custom={custom}></span>
<span class="line">)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="v-for" tabindex="-1"><a class="header-anchor" href="#v-for"><span><strong>v-for</strong></span></a></h3><p>采用map循环的方式，返回一个数组</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><template></span>
<span class="line"> <div v-for="(index, item) in list" :key="item">{{item}}</div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">return () => (</span>
<span class="line"> <></span>
<span class="line"> {</span>
<span class="line"> list.map((item, index) => <div>{item}</div></span>
<span class="line"> }</span>
<span class="line"> </></span>
<span class="line">)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="自定义指令" tabindex="-1"><a class="header-anchor" href="#自定义指令"><span><strong>自定义指令</strong></span></a></h3><p>自定义指令和普通指令<code>v-model</code>一样</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><template></span>
<span class="line"> <div v-custom="command">自定义指令</div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">return () => (</span>
<span class="line"> <div v-custom={command}>自定义指令</div></span>
<span class="line">)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="插槽" tabindex="-1"><a class="header-anchor" href="#插槽"><span><strong>插槽</strong></span></a></h3><p>插槽有两种实现方式，一种是用<code>v-slots</code>绑定对象，一种是直接在元素中使用对象。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC child</span>
<span class="line"><template></span>
<span class="line"> <div></span>
<span class="line"> <slot>默认插槽: default</slot></span>
<span class="line"> <br /></span>
<span class="line"> <slot name="header">具名插槽：header</slot></span>
<span class="line"> <br /></span>
<span class="line"> <slot name="main" :var1="111" class="item" :var2="222">作用域插槽：main</slot></span>
<span class="line"> </div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// SFC parent</span>
<span class="line"><template></span>
<span class="line"> <div></span>
<span class="line"> <child></span>
<span class="line"> 我就是默认的</span>
<span class="line"> <template #main="row"> 我是主要的{{ row.var1 }} </template></span>
<span class="line"> <template #header>我是头</template></span>
<span class="line"> </child></span>
<span class="line"> </div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// TSX child</span>
<span class="line">import { defineComponent } from 'vue';</span>
<span class="line"></span>
<span class="line">export default defineComponent({</span>
<span class="line"> setup(props, { slots }) {</span>
<span class="line"> return () => (</span>
<span class="line"> <div></span>
<span class="line"> 默认插槽: {slots.default && slots.default()}</span>
<span class="line"> <br /></span>
<span class="line"> 具名插槽: {slots.header && slots.header()}</span>
<span class="line"> <br /></span>
<span class="line"> 作用域插槽:{slots.main && slots.main({ name: '我是作用域插槽的传值' })}</span>
<span class="line"> </div></span>
<span class="line"> );</span>
<span class="line"> }</span>
<span class="line">});</span>
<span class="line"></span>
<span class="line">// TSX parent 第一种方式</span>
<span class="line">return () => (</span>
<span class="line"> <Child v-slots={{</span>
<span class="line"> default: () => '默认的内容是',</span>
<span class="line"> header: () => '我是有名称的',</span>
<span class="line"> main: (props: Record<'name', string>) => '我才是主要的' + props.name</span>
<span class="line"> }}></span>
<span class="line"> </Child></span>
<span class="line">)</span>
<span class="line"></span>
<span class="line">// 第二种方式</span>
<span class="line">return () => (</span>
<span class="line"> <Child v-slots={{</span>
<span class="line"> default: () => '默认的内容是',</span>
<span class="line"> header: () => '我是有名称的',</span>
<span class="line"> main: (props: Record<'name', string>) => '我才是主要的' + props.name</span>
<span class="line"> }}></span>
<span class="line"> </Child></span>
<span class="line">)</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="props" tabindex="-1"><a class="header-anchor" href="#props"><span><strong>props</strong></span></a></h3><p><a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E7%88%B6%E7%BB%84%E4%BB%B6&zhida_source=entity" target="_blank" rel="noopener noreferrer">父组件</a>向子组件传值</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line">defineProps<{</span>
<span class="line"> name: string,</span>
<span class="line"> childs: string[]</span>
<span class="line">}>()</span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">export default defineComponent({</span>
<span class="line"> props: {</span>
<span class="line"> name: String,</span>
<span class="line"> childs: {</span>
<span class="line"> type: Array as PropsType<string[]>,</span>
<span class="line"> default: []</span>
<span class="line"> },</span>
<span class="line"> setup(props, { slots }) {</span>
<span class="line"> return () => <div>{props.name}</div></span>
<span class="line"> }</span>
<span class="line">})</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意的是，prop传递过来的值如果没有默认值，需要判断是否为空，可以使用计算属性或者条件渲染处理。</p><h3 id="emit" tabindex="-1"><a class="header-anchor" href="#emit"><span><strong>emit</strong></span></a></h3><p><a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=2&q=%E5%AD%90%E7%BB%84%E4%BB%B6&zhida_source=entity" target="_blank" rel="noopener noreferrer">子组件</a>向父组件传值</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line">const emits = defineEmits<{</span>
<span class="line"> (e: 'changeName', name: string): void;</span>
<span class="line">}>();</span>
<span class="line"></span>
<span class="line">emits('changeName', '张三')</span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">export default defineComponent({</span>
<span class="line"> emits: ['changeName'],</span>
<span class="line"> setup(props, {emit}) {</span>
<span class="line"> emit('changeName', '张三')</span>
<span class="line"> return () => <div></div></span>
<span class="line"> }</span>
<span class="line">})</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="事件监听" tabindex="-1"><a class="header-anchor" href="#事件监听"><span><strong>事件监听</strong></span></a></h3><p>事件监听就是<code>v-on</code>或者<code>@</code>，在<code>TSX</code>中事件以<code>on</code>开头，即使我们的自定义事件没有<code>on</code>，也要在监听的时候加上，一般都采用的是小驼峰的方式。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><template></span>
<span class="line"> <div @click="handleClick">无参数</div></span>
<span class="line"> <div @click="(event) => handleClick1(event)">鼠标事件参数</div></span>
<span class="line"> <div @click="handleClick2('abc')">自定义参数</div></span>
<span class="line"></template></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">return () => (</span>
<span class="line"> <></span>
<span class="line"> <div onClick={handleClick}>无参数</div></span>
<span class="line"> <div onClick={(event) => handleClick1(event)}>鼠标事件参数</div></span>
<span class="line"> <div onClick={() => handleClick2('abc')}>自定义参数</div></span>
<span class="line"> </></span>
<span class="line">);</span>
<span class="line"></span>
<span class="line">// 函数定义相同</span>
<span class="line">const handleClick = () => {</span>
<span class="line"> console.log('click');</span>
<span class="line">};</span>
<span class="line"></span>
<span class="line">const handleClick1 = (e: MouseEvent) => {</span>
<span class="line"> console.log(e.offsetX);</span>
<span class="line">};</span>
<span class="line"></span>
<span class="line">const handleClick2 = (name: string) => {</span>
<span class="line"> console.log(name);</span>
<span class="line">};</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=2&q=%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6&zhida_source=entity" target="_blank" rel="noopener noreferrer">自定义事件</a>只需要在事件名前面加上<code>on</code>即可，<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92&zhida_source=entity" target="_blank" rel="noopener noreferrer">参数传递</a>与上面一致</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><div @custom="handleCustom()"></div></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line"><div onCustom={handleCustom}></div></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>TSX</code>中处理事件不能使用<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6&zhida_source=entity" target="_blank" rel="noopener noreferrer">事件修饰符</a>，因此需要在事件函数中自行处理，例如冒泡、阻止默认行为等。</p><h3 id="属性-事件继承" tabindex="-1"><a class="header-anchor" href="#属性-事件继承"><span><strong>属性/事件继承</strong></span></a></h3><p>对于这个我也不知道怎么描述，当我们给一个组件传递属性和事件时，一般子组件在<code>props</code>中接收属性值，<code>emits</code>中接收事件，但是我们也可以传一些额外的属性和事件，即不在<code>props</code>和<code>emits</code>中的属性和事件，虽然这是不推荐的做法，但是有时候当我们封装第三方库的时候，这种用法就非常的方便。具体看如下代码：</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// parent name和click都不在子组件的明确接收中</span>
<span class="line"><Child name="张三" @click="handleClick" /></span>
<span class="line"></span>
<span class="line"></span>
<span class="line">// SFC child</span>
<span class="line"><div v-bind="$attrs">继承属性/事件</div></span>
<span class="line"></span>
<span class="line">// TSX child</span>
<span class="line"><div {...attrs}>继承事件</div></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code>SFC</code>中，在<code>template</code>中我们可以通过<code>$attrs</code>获取到额外的属性和方法，<code>script</code>中可以通过<code>getCurrentInstance</code>方法获取组件对象，然后通过<code>.attrs</code>拿到属性和方法。</p><p><code>TSX</code>中，直接通过<code>attrs</code>获取属性和方法，通过<code>{...attrs}</code>把属性和方法传递给子元素。</p><h3 id="其他命令" tabindex="-1"><a class="header-anchor" href="#其他命令"><span><strong>其他命令</strong></span></a></h3><p><code>v-show</code>和<code>v-model</code>与<code>SFC</code>中使用一样，这里不做示例</p><h3 id="组件引用" tabindex="-1"><a class="header-anchor" href="#组件引用"><span><strong>组件引用</strong></span></a></h3><p>通过<code>ref</code>获取组件<code>dom</code>信息</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><ChildComponent ref="com" /></span>
<span class="line"></span>
<span class="line">const com = ref(null)</span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">const com = ref(null)</span>
<span class="line"></span>
<span class="line">return () => <ChildComponent ref={com} /></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="对外暴露属性和方法" tabindex="-1"><a class="header-anchor" href="#对外暴露属性和方法"><span><strong>对外暴露属性和方法</strong></span></a></h3><p>在父组件中直接调用子组件的属性和方法</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line">defineExpose<{</span>
<span class="line"> name: Ref<string>;</span>
<span class="line"> handleClick: () => void;</span>
<span class="line">}>({</span>
<span class="line"> name,</span>
<span class="line"> handleClick</span>
<span class="line">});</span>
<span class="line"></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line">setup(props, { expose }) {</span>
<span class="line"> expose({name, handleClick})</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="样式修改" tabindex="-1"><a class="header-anchor" href="#样式修改"><span><strong>样式修改</strong></span></a></h3><p>样式的改造一度是我切换<code>TSX</code>的最大痛点，因为在<code>SFC</code>中最麻烦的是修改第三方库的样式，一般要用到<code>:deep</code>，而且有时候还不一定成功，非常麻烦，改为<code>TSX</code>后我一直不知道怎么解决这种问题，后来搞定以后再回过头来看，发现是<code>vue</code>写久了养成了固定思维。我们在<code>vue</code>文件中写的样式都包含在<code>scoped</code>下面，如果不加<code>scoped</code>就可能会造成全局样式污染。那为什么会造成全局样式污染？又为什么加了<code>scoped</code>就不会呢？实际上我们只要知道<code>CSS</code>基础，明白<code>CSS</code>中的样式优先级即可。<code>vue</code>生成的项目最终还是会回归到<code>html</code>、<code>css</code>、<code>js</code>来，因此我们从这里来理解就方便多了。</p><ul><li>为什么会造成全局样式污染？</li></ul><p>这个不是<code>vue</code>的专利，而是<code>css</code>本身的优先级问题，就是如果我们定义了相同的<code>css</code>类，并以相同的方式来使用它，那么根据先后加载顺序，就会导致后加载的覆盖掉先加载的样式，造成先加载的样式无效，这就是所谓的样式污染。</p><ul><li>为什么加了<code>scoped</code>就不会造成样式污染呢？</li></ul><p>我们看一个简单的例子：</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line"><div class="item">样式示例</div></span>
<span class="line"></span>
<span class="line"><style lang="less" scoped></span>
<span class="line">.item {</span>
<span class="line"> background-color: pink;</span>
<span class="line">}</span>
<span class="line"></style></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>看一下<code>html</code>和<code>css</code>源码</p><p><img src="https://picx.zhimg.com/v2-100c9bd4e9762d8ad40868347a992d05_1440w.jpg" alt="img"></p><p>可以看到，<code>vue</code>组件在渲染的时候，会给元素增加一个属性<code>data-v-xxxx</code>，然后在生成样式的时候也会在样式上加上<code>[data-v-xxxxx]</code>，这是<code>css</code>属性选择器的用法，这样根据<code>css</code>选择器的优先级，这个属性就具有唯一性。</p><p>但是在<code>TSX</code>中没有了<code>scoped</code>怎么办？很简单，回归原始的<code>css</code>即可。在原始<code>css</code>中需要我们自己来保证<code>css</code>选择的唯一性，具体做法就是给组件内使用的css类都加上唯一前缀，例如组件名称为<code>Child</code>，那么所有的<code>css</code>类都加上<code>child-xxx</code>，因为我们肯定要保证组件名称的唯一性，所以这样下来对应的样式也就是唯一的。这就要求我们给所有需要修改样式的元素都加上类或者<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7&zhida_source=entity" target="_blank" rel="noopener noreferrer">自定义属性</a>，以便于我们可以通过唯一的<code>css</code>选择器选中它。</p><p>示例如下：</p><p>创建一个<code>css</code>文件：<code>child.css</code></p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">.child-item {</span>
<span class="line"> background-color: pink;</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>tsx</code>文件中引用</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// TSX child.tsx</span>
<span class="line">import './child.css'</span>
<span class="line"></span>
<span class="line">return () => <div class="child-item"></div></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>除了上面这种保证样式名称唯一的方式以外，<code>vue</code>其实一直为我们提供了另外一种方式-<code>css module</code>，具体来讲就是把<code>css</code>作为模块引入到<code>js</code>中，然后会生成一个唯一的名称，在以前用<code>webpack</code>的时候还需要装额外的包，现在<code>vite</code>已经帮我们集成了，只需要在<code>vite.config.ts</code>中加一下配置即可。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">css: {</span>
<span class="line"> modules: {</span>
<span class="line"> localsConvention: 'camelCase'</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里规定<code>css</code>类名的<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99&zhida_source=entity" target="_blank" rel="noopener noreferrer">命名规则</a>为小驼峰，即<code>child-item</code>类在<code>js</code>中会变成<code>childItem</code>变量。但是要实现<code>css module</code>的功能，对<code>css</code>文件命名由要求，必须在后缀名前面是<code>module</code>，例如<code>xxx.module.css</code>、<code>xxx.module.less</code>、<code>xxx.module.scss</code>。</p><p>示例如下：</p><p>创建一个<code>css</code>文件：<code>child.module.css</code></p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">.child-item {</span>
<span class="line"> background-color: pink;</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>tsx</code>文件中引用</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// TSX child.tsx</span>
<span class="line">import styles from './child.module.css'</span>
<span class="line"></span>
<span class="line">return () => <div class={styles.childItem}></div></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>打开浏览器看一下源码</p><p><img src="https://pic1.zhimg.com/v2-a6bbcab3ce3d79e939e7ee09c04afe72_1440w.jpg" alt="img"></p><p>可以看到元素上绑定的<code>css</code>和全局的<code>css</code>都出现了变化，这种方式我们就不需要去关注编写的<code>css</code>是否是唯一的，<code>vite</code>会帮我们自行处理，只是在使用的时候有一些区别。</p><p>除了常规的<code>css</code>使用，我们还有动态<code>class</code>的使用。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><div class="box" :class="{active: count === 1}"></div></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line"><div class={['box', count===1 ? 'active' : '']}></div></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们把需要的<code>class</code>处理成一个数组给它即可。</p><p>除了动态<code>class</code>还有动态<code>style</code>的使用。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">// SFC</span>
<span class="line"><div :style="{ height: height + 'px' }"></div></span>
<span class="line"></span>
<span class="line">// TSX</span>
<span class="line"><div style={{ height: height.value + 'px' }}></div></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="总结" tabindex="-1"><a class="header-anchor" href="#总结"><span><strong>总结</strong></span></a></h2><p>目前对于大部分场景的使用都写到了，如果后期有其他的<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=%E8%AF%AD%E6%B3%95%E7%B3%96&zhida_source=entity" target="_blank" rel="noopener noreferrer">语法糖</a>在进行补充，示例项目：vue3-tsx-todo，请在<a href="https://zhida.zhihu.com/search?content_id=213288748&content_type=Article&match_order=1&q=gitee&zhida_source=entity" target="_blank" rel="noopener noreferrer">gitee</a>上进行搜索</p><p><img src="https://pic4.zhimg.com/v2-cc6406106de8b22a08ea1fababd5c42d_r.jpg" alt="img"></p></div><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/shixindea/shixinde-notes/edit/main/vue笔记及周边生态/jsx tsx 笔记.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 2914310412@qq.com">袁果锅</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/jsx%20tsx%20%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5.html" aria-label="10. jsx tsx 代码片段.md"><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span>10. jsx tsx 代码片段.md</span></div></a><a class="route-link auto-link next" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/uniapp%E7%AC%94%E8%AE%B0.html" aria-label="12. uniapp笔记.md"><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span>12. uniapp笔记.md</span></div></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!----><!--]--><!--]--></div>
<script type="module" src="/guoguo-notes/assets/app-Dx9bNbfq.js" defer></script>
</body>
</html>