CINXE.COM
自定义组件 | Mpx 框架
<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>自定义组件 | Mpx 框架</title> <meta name="description" content="A VitePress site"> <meta name="generator" content="VitePress v1.6.3"> <link rel="preload stylesheet" href="/assets/style.D9lwO_cj.css" as="style"> <link rel="preload stylesheet" href="/vp-icons.css" as="style"> <script type="module" src="/assets/app.BTrdtP6E.js"></script> <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="modulepreload" href="/assets/chunks/theme.BtY8jpWz.js"> <link rel="modulepreload" href="/assets/chunks/framework.BRjwFPxv.js"> <link rel="modulepreload" href="/assets/guide_basic_component.md.BVlz4Z0G.lean.js"> <link rel="icon" href="/favicon.ico"> <link rel="manifest" href="/manifest.webmanifest"> <script type="text/javascript">(function(e,r,t,i,a,n,s){e[t]=e[t]||function(){(e[t].q=e[t].q||[]).push(arguments)},n=r.createElement(i),n.async=1,n.src="https://www.clarity.ms/tag/"+a,s=r.getElementsByTagName(i)[0],s.parentNode.insertBefore(n,s)})(window,document,"clarity","script","jtvvy52wxy");</script> <meta name="author" content="Mpx 框架"> <meta property="og:type" content="website"> <meta name="og:title" content="Mpx 框架"> <meta name="og:description" content="深度性能优化的增强型小程序开发框架"> <meta property="og:image" content="https://mpxjs.cn/logo.png"> <meta property="og:url" content="https://mpxjs.cn/"> <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script> <link rel="manifest" href="/manifest.webmanifest"> </head> <body> <div id="app"><div class="container"><div><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/favicon.ico" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>Mpx 框架</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/basic/start.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/articles/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>文章</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/didi/mpx/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>更新记录</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/didi/mpx" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>外观</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/didi/mpx" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>菜单</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>基础</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/start.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/intro.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/single-file.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>单文件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/ide.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>IDE 高亮配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/template.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>模板语法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/css.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CSS 处理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/reactive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>数据响应</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/class-style-binding.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>类名样式绑定</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/conditional-render.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>条件渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/list-render.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>列表渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/event.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>事件处理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/two-way-binding.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>双向绑定</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/component.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>自定义组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/refs.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>获取组件实例/节点信息</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/option-chain.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>模版内可选链表达式</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>进阶</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/store.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>状态管理（store）</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/pinia.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>状态管理（pinia）</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/mixin.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>使用 mixin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/npm.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>使用 npm</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/subpackage.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>使用分包</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/async-subpackage.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>分包异步化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/platform.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>跨平台</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/i18n.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>国际化 i18n</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/size-report.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>包体积分析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/image-process.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>图像资源处理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/progressive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>原生渐进迁移</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/ability-compatible.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>原生能力兼容</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/plugin.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>小程序插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/custom-output-path.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>自定义路径</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/utility-first-css.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>使用原子类</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/ssr.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>SSR</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/provide-inject.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>依赖注入（Provide/Inject）</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/build-config.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>编译配置</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>跨端</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/platform/basic.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>跨端输出基础</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/platform/rn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>跨端输出 RN</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>组合式 API</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/composition-api/composition-api.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>组合式 API</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/composition-api/reactive-api.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>响应式 API</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>工具</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/tool/ts.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>使用TypeScript开发小程序</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/tool/unit-test.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>单元测试</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/tool/e2e-test.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>E2E自动化测试</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>拓展</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/extend/fetch.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>网络请求</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/extend/api-proxy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>API 转换</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/extend/mock.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>数据 Mock</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>理解</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/understand/runtime.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Mpx运行时增强原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/understand/compile.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Mpx编译构建原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>迁移</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/2.9.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>从 2.8 升级至 2.9</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/2.8.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>从 2.7 升级至 2.8</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/2.7.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>从旧版本迁移至 2.7</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/mpx-cli-3.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>mpx-cli v2 迁移到 v3</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>本页目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _guide_basic_component" data-v-39a288b8><div><h1 id="自定义组件" tabindex="-1">自定义组件 <a class="header-anchor" href="#自定义组件" aria-label="Permalink to "自定义组件""></a></h1><p>在 Mpx 中也可以使用类似 Vue 中的单文件自定义组件，我们可以在每个组件内封装自定义内容和逻辑。</p><p>在Mpx中自定义组件，语法默认以微信小程序为基准，与此同时，Mpx 额外提供的数据响应和模版增强语法等一系列增强能力都可以在自定义组件中使用。</p><blockquote><p>作为参考，原生小程序自定义组件的规范详情查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html" target="_blank" rel="noreferrer">这里</a>，但在Mpx中自定义组件所支持的属性和功能还需以当前文档为准。</p></blockquote><h2 id="注册使用" tabindex="-1">注册使用 <a class="header-anchor" href="#注册使用" aria-label="Permalink to "注册使用""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!--组件 components/list.mpx--></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>组件名称: {{ name }}</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'list'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!--页面 index.mpx--></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createPage } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({})</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"application/json"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "usingComponents": {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "list": "components/list"</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>使用 <a href="/api/global-api.html#createcomponent">createComponent</a> 方法创建自定义组件，在父组件/页面中通过 usingComponents 注册使用。</p><h2 id="组件属性" tabindex="-1">组件属性 <a class="header-anchor" href="#组件属性" aria-label="Permalink to "组件属性""></a></h2><p>对于组件属性的讲解，下方暂时使用选项式 API 进行讲解。</p><h3 id="properties" tabindex="-1">properties <a class="header-anchor" href="#properties" aria-label="Permalink to "properties""></a></h3><p>用于声明组件接收的外部属性。属性的类型可以为 String、Number、Boolean、Object、Array 其一，也可以为 null 表示不限制类型。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PropType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StringConstructor</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // String</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> NumberConstructor</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Number</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> BooleanConstructor</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Boolean</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ObjectConstructor</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Object</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ArrayConstructor</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Array; </span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// null</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> properties</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PropOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PropType</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PropOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PropType</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // type 为必填项</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> optionalTypes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PropType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 属性的类型（可以指定多个）</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> observer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">oldVal</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>properties 定义包含以下选项：</p><ul><li><strong><code>type</code></strong>: 必填，属性的类型</li><li><strong><code>optionalTypes</code></strong>: 可选，属性的类型（可以指定多个）</li><li><strong><code>value</code></strong>: 可选，属性的初始值</li><li><strong><code>observer</code></strong>: 可选，属性值变化时的回调函数</li></ul><blockquote><p><strong>注意：</strong></p><ol><li>属性名应避免以 data 开头，例如 data-xyz="" 会被作为节点 dataset 来处理</li><li>在组件定义和使用时，属性名和 data 字段相互间都不能冲突</li></ol></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> properties: {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 基础类型</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> propA: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: String,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 简化的定义方式</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> propB: Number,</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 多种类型</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> propC: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: Number,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> optionalTypes: [String, Object],</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 带有属性值变化回调</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> propE: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: Object,</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> observer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">oldVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'propE changed:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal, oldVal)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p><strong>参考</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html#properties-%E5%AE%9A%E4%B9%89" target="_blank" rel="noreferrer">微信小程序properties定义</a></p><h3 id="data" tabindex="-1">data <a class="header-anchor" href="#data" aria-label="Permalink to "data""></a></h3><p>组件的内部数据，和 properties 一同用于组件的模板渲染。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> object</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> object</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>data 可以是一个函数返回一个普通 JavaScript 对象，也可以是一个普通 JavaScript 对象。</p><p>在 Mpx 中，组件实例会代理 data 对象的所有属性并进行响应式处理，因此可以直接通过 <code>this.dataName</code> 访问这些数据, 同时修改这些数据也会触发视图更新。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>{{ count }}</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>{{ message }}</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>{{ userInfo.name }}</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> userInfo: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> methods: {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> addCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>// TODO data 的注意项</p><h3 id="computed" tabindex="-1">computed <a class="header-anchor" href="#computed" aria-label="Permalink to "computed""></a></h3><p>用于声明基于现有数据的计算属性。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedGetter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedSetter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WritableComputedOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> get</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedGetter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> set</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedSetter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 计算属性可以是函数或对象</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedOption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedGetter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WritableComputedOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 组件选项的接口</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> computed</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">K</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComputedOption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>该选项接收一个对象，其中键是计算属性的名称，值是一个计算属性 getter，或一个具有 get 和 set 方法的对象 (用于声明可写的计算属性)。</p><p>所有的 getters 和 setters 会将它们的 this 上下文自动绑定为组件实例。</p><p>computed 选项用于声明依赖于其他数据的计算属性。计算属性的结果会被缓存，只有在依赖发生变化时才会重新计算。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> price: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> quantity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> computed: {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 只读计算属性</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> total</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.price </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.quantity</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 可读写计算属性</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> discount: {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.price </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.9</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.price </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.9</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><blockquote><p>注意</p><ul><li>选项式 API 中 computed 尽量不要使用箭头函数，否则无法访问组件实例 this</li></ul></blockquote><h3 id="watch" tabindex="-1">watch <a class="header-anchor" href="#watch" aria-label="Permalink to "watch""></a></h3><p>用于对响应性数据变化调用的侦听回调。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// flush 选项的可选值类型</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FlushMode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sync'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'post'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'pre'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> watch</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WatchOption</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WatchCallback</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WatchCallback</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newValue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">oldValue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WatchOption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> handler</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WatchCallback</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> immediate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 是否立即执行</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> deep</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 是否深度监听</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> flush</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FlushMode</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 回调的执行时机</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>watch 选项用于监听数据的变化并执行相应的回调函数。支持以下功能：</p><ul><li>监听单个数据源</li><li>监听多个数据源</li><li>深度监听（deep）</li><li>立即执行（immediate）</li><li>执行时机控制（flush） <ul><li><code>'sync'</code>: 同步执行，立即触发回调</li><li><code>'post'</code>: DOM 更新后执行（默认值）</li><li><code>'pre'</code>: DOM 更新前执行</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> watch: {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 简单监听</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">oldVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'message changed:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal, oldVal)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 深度监听</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user: {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">oldVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user changed:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal, oldVal)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> deep: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> immediate: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 监听对象的属性</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'user.name'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">oldVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user.name changed:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal, oldVal)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 控制执行时机</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count: {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'count changed:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> flush: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'post'</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // DOM 更新后执行</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="observers" tabindex="-1">observers <a class="header-anchor" href="#observers" aria-label="Permalink to "observers""></a></h3><p>用于监听数据变化，类似于 watch，最早由微信小程序官方提出，Mpx 框架支持了该能力并做了跨平台兼容。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> observers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newValue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>observers 选项支持以下功能：</p><ul><li>监听单个数据</li><li>监听多个数据</li><li>使用通配符监听对象或数组的所有子数据</li></ul><p>通配符说明：</p><ul><li><code>**</code>：表示所有子数据</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> observers: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> observers: {</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'numberA, numberB'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">numberA</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">numberB</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 在 numberA 或者 numberB 被设置时，执行这个函数</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.numberC </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> numberA </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> numberB</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'some.subfield'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">subfield</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> subfield </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.some.subfield</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'arr[12]'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">arr12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 使用 setData 设置 this.data.arr[12] 时触发</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // （除此以外，使用 setData 设置 this.data.arr 也会触发）</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr12 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.arr[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'some.field.**'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">field</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // field 下所有子数据变化都会触发回调</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> field </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.some.field</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><blockquote><p><strong>注意：</strong></p><ol><li>和 watch 不同，observers 监听多个数据时回调方法的参数为响应性数据最新值，并非数组</li><li>使用通配符与 watch deep 属性表现一致</li><li>建议尽量统一使用 watch</li></ol></blockquote><p><strong>参考</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html#properties-%E5%AE%9A%E4%B9%89" target="_blank" rel="noreferrer">微信小程序数据监听器</a></p><h3 id="methods" tabindex="-1">methods <a class="header-anchor" href="#methods" aria-label="Permalink to "methods""></a></h3><p>用于声明组件的方法。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> methods</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>methods 选项用于声明组件实例可以访问的方法。所有方法的 this 上下文会自动绑定为组件实例。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> methods: {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 访问数据</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.message)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 调用其他方法</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">otherMethod</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> otherMethod</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="mixins" tabindex="-1">mixins <a class="header-anchor" href="#mixins" aria-label="Permalink to "mixins""></a></h3><p>一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中。</p><p>具体请查看<a href="https://mpxjs.cn/guide/advance/mixin.html" target="_blank" rel="noreferrer">Mpx-mixins</a></p><h3 id="behaviors" tabindex="-1">behaviors <a class="header-anchor" href="#behaviors" aria-label="Permalink to "behaviors""></a></h3><p>小程序平台提供的用于组件间代码共享的特性，类似于"mixins"。</p><p><strong>参考</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html#properties-%E5%AE%9A%E4%B9%89" target="_blank" rel="noreferrer">微信小程序behaviors</a></p><p>在 Mpx 组件内如果使用 behaviors，在跨平台时会进行抹平处理，但建议直接使用 Mpx 提供的 mixins 能力。</p><blockquote><p><strong>注意：</strong></p><ul><li>使用内置 behaviors（如 wx://form-field），因为牵扯到小程序平台底层能力，无法做到完全跨平台抹平</li></ul></blockquote><h3 id="relations" tabindex="-1">relations <a class="header-anchor" href="#relations" aria-label="Permalink to "relations""></a></h3><p>用于定义组件间的关系，支持父子、祖孙等关系，实现组件间的通信与控制。</p><p>该特性 base 微信小程序平台，在Mpx中使用该特性需要注意，输出微信小程序平台时能力完全支持，跨端输出其他平台时受制于平台底层能力，无法完全做抹平支持。</p><table tabindex="0"><thead><tr><th>平台</th><th>支持情况</th><th>说明</th></tr></thead><tbody><tr><td>微信小程序</td><td>完全支持</td><td>完全支持 relations 能力</td></tr><tr><td>支付宝小程序</td><td>部分支持</td><td>部分支持，不支持 linkChanged 和 target 能力</td></tr><tr><td>百度小程序</td><td>不支持</td><td>不支持使用 relations</td></tr><tr><td>QQ小程序</td><td>完全支持</td><td>完全支持 relations 能力</td></tr><tr><td>字节小程序</td><td>部分支持</td><td>部分支持，不支持 linkChanged 能力</td></tr><tr><td>Web</td><td>部分支持</td><td>部分支持，不支持 linkChanged 和 target 能力</td></tr><tr><td>RN</td><td>不支持</td><td>不支持使用 relations</td></tr></tbody></table><p>因此需要注意，在使用 realtions 能力跨平台时需要做好平台条件编译。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RelationOption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'parent'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'child'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'ancestor'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'descendant'</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 关系类型</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> linked</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 关系建立时的回调</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> linkChanged</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 关系变化时的回调</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> unlinked</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 关系解除时的回调</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 关联的 behavior</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> relations</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">componentPath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RelationOption</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>relations 支持以下功能：</p><ul><li>定义组件间的层级关系</li><li>监听关系的生命周期</li><li>获取关联的组件实例</li><li>关联使用相同 behavior 的组件</li></ul><p>详情可参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html" target="_blank" rel="noreferrer">微信小程序-relations</a></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// custom-ul 组件</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> relations: {</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './custom-li'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'child'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 关联的目标节点应为子节点</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> linked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 每次有 custom-li 被插入时执行</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'li linked'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, target)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> unlinked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 每次有 custom-li 被移除时执行</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'li unlinked'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, target)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// custom-li 组件</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> relations: {</span></span> <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './custom-ul'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'parent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 关联的目标节点应为父节点</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> linked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 每次被插入到 custom-ul 时执行</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ul linked'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, target)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="externalclasses" tabindex="-1">externalClasses <a class="header-anchor" href="#externalclasses" aria-label="Permalink to "externalClasses""></a></h3><p>组件接受的外部样式类，常用于在开启组件样式隔离时，可以通过接收外部样式类来改变组件样式。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> externalClasses</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>externalClasses 支持以下功能：</p><ul><li>定义多个外部样式类</li><li>在组件 template 中使用外部样式类，同时支持在同一个节点上使用多个外部样式类</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- 组件 custom-component.mpx --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"my-class"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 外部传入的样式类</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"other-class"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 另一个外部传入的样式类</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 组件 custom-component.js</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> externalClasses: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'my-class'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'other-class'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styleIsolation: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'isolated'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>使用组件：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- 页面 page.mpx --></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- 单个样式类 --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">custom-component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> my-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"red-text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- 多个样式类（需要基础库 2.7.1 以上） --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">custom-component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> my-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"red-text large-text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- 动态样式类 --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">custom-component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> my-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{{isActive ? 'active' : ''}}"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 页面 page style */</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.red-text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.large-text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f0f0f0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>关于 externalclasses 的更多描述也可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB" target="_blank" rel="noreferrer">微信小程序-外部样式类</a></p><blockquote><p><strong>注意：</strong></p><ul><li>该功能默认在微信小程序可用，在跨平台输出时，需要在 @mpxjs/webpack-plugin 中配置相关的 externalClasses, 否则跨平台时该能力不生效，具体配置请<a href="https://mpxjs.cn/api/compile.html#externalclasses" target="_blank" rel="noreferrer">查看</a>。</li></ul></blockquote><h3 id="options" tabindex="-1">options <a class="header-anchor" href="#options" aria-label="Permalink to "options""></a></h3><p>开启组件的部分特性时需要设置的选项，例如 virtualHost 、 multipleSlots 之类特性。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ComponentOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> virtualHost</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 设置组件是否为虚拟节点</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> styleIsolation</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'isolated'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'apply-shared'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'shared'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'page-isolated'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'page-apply-shared'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'page-shared'</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 设置样式隔离选项</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> multipleSlots</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 启用多 slot 支持</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> addGlobalClass</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 允许组件的样式影响到外部</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>options 支持以下配置：</p><ul><li><strong>virtualHost</strong>: 设置组件是否是虚拟的</li><li><strong>styleIsolation</strong>: 设置组件样式隔离选项</li><li><strong>multipleSlots</strong>: 是否启用多 slot 支持，仅微信和QQ需要配置</li><li><strong>addGlobalClass</strong>: 是否允许组件的样式影响外部</li></ul><p>但需要注意的是，此处的 options 配置为 base 微信小程序的语法特性，在跨端输出其他平台时，由于依赖平台底层能力支持与否，因此无法做到全部功能抹平。</p><table tabindex="0"><thead><tr><th>选项</th><th>微信</th><th>支付宝</th><th>百度</th><th>QQ</th><th>字节</th><th>Web</th><th>RN</th><th>说明</th></tr></thead><tbody><tr><td>virtualHost</td><td>✓</td><td>✓</td><td>✗</td><td>✓</td><td>✓</td><td>✓</td><td>✗</td><td>Mpx 以微信为base，virtualHost 默认为 false，跨端输出Web、支付宝时默认会在自定义组件根节点包裹一层节点，开发者也可以通过<a href="https://mpxjs.cn/api/compile.html#autovirtualhostrules" target="_blank" rel="noreferrer">编译配置</a>进行控制</td></tr><tr><td>styleIsolation</td><td>✓</td><td>部分支持</td><td>✗</td><td>✓</td><td>✗</td><td>✗</td><td>✗</td><td>微信默认开启样式隔离，目前只有支付宝小程序平台没有样式隔离能力, 当组件 style 标签配置 scoped 时，Mpx 输出支付宝会默认抹平开启样式隔离，开发者也可通过<a href="https://mpxjs.cn/api/compile.html#autoscoperules" target="_blank" rel="noreferrer">编译配置</a>进行控制</td></tr><tr><td>multipleSlots</td><td>✓</td><td>-</td><td>-</td><td>✓</td><td>-</td><td>-</td><td>-</td><td>目前仅微信和QQ使用多个slot需要配置multipleSlots，其他平台默认支持使用多slot</td></tr><tr><td>addGlobalClass</td><td>✓</td><td>✗</td><td>✓</td><td>✓</td><td>✗</td><td>✗</td><td>✗</td><td>-</td></tr></tbody></table><blockquote><p><strong>注意：</strong></p><ul><li>virtualHost 在支付宝平台默认为 false options 中的特性以微信小程序为 base，随着微信小程序的持续迭代，此处列出的特性可能会存在部分缺失。 同时对于上述各特性的具体使用，特别是各小程序平台，开发者也可以在对应小程序开发文档中查找参考。</li></ul></blockquote><h3 id="组件生命周期" tabindex="-1">组件生命周期 <a class="header-anchor" href="#组件生命周期" aria-label="Permalink to "组件生命周期""></a></h3><p>在 Mpx 内组件生命周期可以使用<a href="./框架内置生命周期.html">框架内置生命周期</a>，也可以使用以微信原生base的生命周期，在使用微信原生base的生命周期时，在跨平台输出时，框架会对生命周期进行映射抹平，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异。</p><p>在选项式 API 中，可以使用微信 base 或者 Mpx 框架暴露的内置生命周期。</p><p>微信原生生命周期：</p><table tabindex="0"><thead><tr><th>生命周期</th><th>说明</th></tr></thead><tbody><tr><td>created</td><td>在组件实例初始化完成时调用</td></tr><tr><td>attached</td><td>在组件挂载开始之前调用</td></tr><tr><td>ready</td><td>在组件在视图层布局完成后调用</td></tr><tr><td>detached</td><td>在组件实例销毁时调用</td></tr></tbody></table><p>在组合式 API 中，需要使用框架暴露的统一的<a href="https://mpxjs.cn/api/composition-api.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90" target="_blank" rel="noreferrer">生命周期钩子</a></p><h3 id="pagelifetimes" tabindex="-1">pageLifetimes <a class="header-anchor" href="#pagelifetimes" aria-label="Permalink to "pageLifetimes""></a></h3><p>组件中访问页面生命周期</p><p>在选项式中可以直接使用 pageLifetimes.show 之类的配置：</p><table tabindex="0"><thead><tr><th>生命周期</th><th>说明</th></tr></thead><tbody><tr><td>show</td><td>组件所在页面显示</td></tr><tr><td>hide</td><td>组件所在页面隐藏</td></tr><tr><td>resize</td><td>组件所在页面尺寸发生变化</td></tr></tbody></table><p>在组合式 API 中，需要使用框架暴露的 onShow、onHide、onResize，详情可<a href="https://mpxjs.cn/api/composition-api.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90" target="_blank" rel="noreferrer">查看</a></p><h2 id="组件实例方法" tabindex="-1">组件实例方法 <a class="header-anchor" href="#组件实例方法" aria-label="Permalink to "组件实例方法""></a></h2><h3 id="setdata" tabindex="-1">setData <a class="header-anchor" href="#setdata" aria-label="Permalink to "setData""></a></h3><p>更新视图数据，无论数据value是否改变，都会强制刷新视图。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span> <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>,</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> callback</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>setData 支持以下功能:</p><ul><li>修改 data 数据</li><li>支持设置回调函数，回掉函数在视图更新完成后执行</li><li>支持批量更新多个数据</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'init data'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> methods: {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> changeData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 修改数据</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'changed data'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 设置回调函数</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'changed data'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'数据更新完成'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>在 Mpx 内请慎重使用 setData，建议直接使用组件实例修改数据</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.text </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'some data'</span></span></code></pre></div><table tabindex="0"><thead><tr><th>API</th><th>微信</th><th>支付宝</th><th>百度</th><th>QQ</th><th>字节</th><th>Web</th><th>RN</th><th>说明</th></tr></thead><tbody><tr><td>setData</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✗</td><td>✓</td><td>-</td></tr></tbody></table><h3 id="triggerevent" tabindex="-1">triggerEvent <a class="header-anchor" href="#triggerevent" aria-label="Permalink to "triggerEvent""></a></h3><h3 id="getpageid" tabindex="-1">getPageId <a class="header-anchor" href="#getpageid" aria-label="Permalink to "getPageId""></a></h3><h3 id="selectcomponent" tabindex="-1">selectComponent <a class="header-anchor" href="#selectcomponent" aria-label="Permalink to "selectComponent""></a></h3><h3 id="createselectorquery" tabindex="-1">createSelectorQuery <a class="header-anchor" href="#createselectorquery" aria-label="Permalink to "createSelectorQuery""></a></h3><h3 id="createintersectionobserver" tabindex="-1">createIntersectionObserver <a class="header-anchor" href="#createintersectionobserver" aria-label="Permalink to "createIntersectionObserver""></a></h3><h3 id="selectallcomponents" tabindex="-1">selectAllComponents <a class="header-anchor" href="#selectallcomponents" aria-label="Permalink to "selectAllComponents""></a></h3><h3 id="hasbehavior" tabindex="-1">hasBehavior <a class="header-anchor" href="#hasbehavior" aria-label="Permalink to "hasBehavior""></a></h3><h2 id="动态组件" tabindex="-1">动态组件 <a class="header-anchor" href="#动态组件" aria-label="Permalink to "动态组件""></a></h2><p>Mpx中提供了使用方法类似于 Vue 的动态组件能力，这是一个基于 wx:if 实现的语法。通过对 <code>is</code> 属性进行动态绑定，可以实现在同一个挂载点切换多个组件，前提需要动态切换的组件已经在全局或者组件中完成注册。</p><p>使用示例如下：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- current为组件名称字符串，可选范围为局部注册的自定义组件和全局注册的自定义组件 --></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- 当 `current`改变时，组件也会跟着切换 --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> is</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{{current}}"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {createComponent} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> current: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'test'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ready</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.current </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'list'</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"application/json"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "usingComponents": {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "list": "../components/list",</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "test": "../components/test"</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="slot" tabindex="-1">slot <a class="header-anchor" href="#slot" aria-label="Permalink to "slot""></a></h2><p>在组件中使用slot（插槽）可以使我们封装的组件更具有可扩展性，Mpx完全支持原生插槽的使用。</p><h3 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to "基础用法""></a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- 组件模板 --></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- components/mySlot.mpx --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>这是组件模板</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"slot1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"slot2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>使用组件时：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- index.mpx --></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"slot1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>我是slot1中的内容</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"slot2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>我是slot2中的内容</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> multipleSlots: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 启用多slot支持</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"application/json"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "usingComponents": {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "my-slot": "components/mySlot"</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><blockquote><p>注意：使用多个slot时，需要在组件选项中开启 <code>multipleSlots: true</code>。</p></blockquote><p>更多关于插槽的使用细节可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html" target="_blank" rel="noreferrer">微信小程序官方文档</a>。</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2025-01-15T10:07:24.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/guide/basic/two-way-binding.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>上一页</span><span class="title" data-v-e257564d>双向绑定</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/guide/basic/refs.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>下一页</span><span class="title" data-v-e257564d>获取组件实例/节点信息</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!----><!--]--></div></div></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_app-config.md\":\"8yUvMnrA\",\"api_builtin.md\":\"zC7lHwxi\",\"api_compile.md\":\"CEVfr7XI\",\"api_composition-api.md\":\"Clk-dbRQ\",\"api_directives.md\":\"Iz0_eRUW\",\"api_extend.md\":\"COshM7be\",\"api_global-api.md\":\"DekFw7fO\",\"api_index.md\":\"DPy5cwYH\",\"api_instance-api.md\":\"D7wqBPPP\",\"api_optional-api.md\":\"C9RjUBcS\",\"api_reactivity-api.md\":\"Br0_H2qt\",\"api_store-api.md\":\"D58j1Loq\",\"articles_1.0.md\":\"CX3uMEvE\",\"articles_2.0.md\":\"BiE2-Btj\",\"articles_2.7-release.md\":\"CtxTlBaz\",\"articles_2.8-release-alter.md\":\"O870wUeV\",\"articles_2.8-release.md\":\"DUJxybJv\",\"articles_2.9-release-alter.md\":\"B0zILKuf\",\"articles_2.9-release.md\":\"-fAvpoEu\",\"articles_index.md\":\"PgSaR_s8\",\"articles_mpx-cli-next.md\":\"DLApcxVv\",\"articles_mpx-cube-ui.md\":\"DPiau_2k\",\"articles_mpx1.md\":\"CPF70K1U\",\"articles_mpx2.md\":\"ChNa77kM\",\"articles_performance.md\":\"BF8yiIIl\",\"articles_size-control.md\":\"DH0nqEH7\",\"articles_ts-derivation.md\":\"Y2VtWgAq\",\"articles_unit-test.md\":\"D45q9SRT\",\"desc.md\":\"CEhPt_Er\",\"guide_advance_ability-compatible.md\":\"DUUqlGU1\",\"guide_advance_async-subpackage.md\":\"YdRmCpxD\",\"guide_advance_build-config.md\":\"CK_KSb3r\",\"guide_advance_custom-output-path.md\":\"CcDbiRF1\",\"guide_advance_dll-plugin.md\":\"CtchVSg7\",\"guide_advance_i18n.md\":\"D7eAH4JX\",\"guide_advance_image-process.md\":\"R7ATnHM_\",\"guide_advance_mixin.md\":\"BA5vitiz\",\"guide_advance_npm.md\":\"Cel872y9\",\"guide_advance_pinia.md\":\"D3A9y0Gw\",\"guide_advance_platform.md\":\"C-a6y7Wp\",\"guide_advance_plugin.md\":\"EgOm6-ei\",\"guide_advance_progressive.md\":\"DJ7EwCPw\",\"guide_advance_provide-inject.md\":\"FHPTn5Pf\",\"guide_advance_resource-resolve.md\":\"CQ0_dCIQ\",\"guide_advance_size-report.md\":\"DsRaf5lZ\",\"guide_advance_ssr.md\":\"Dighccx3\",\"guide_advance_store.md\":\"RxkbMHcD\",\"guide_advance_subpackage.md\":\"BO3rQ_SJ\",\"guide_advance_utility-first-css.md\":\"DRTXuxCL\",\"guide_basic_class-style-binding.md\":\"CHjIhjm9\",\"guide_basic_component.md\":\"BVlz4Z0G\",\"guide_basic_conditional-render.md\":\"CqWMRF4_\",\"guide_basic_css.md\":\"CMhUuiRO\",\"guide_basic_event.md\":\"CJro7QhD\",\"guide_basic_ide.md\":\"J6p9ySwr\",\"guide_basic_intro.md\":\"BQ5nSHat\",\"guide_basic_list-render.md\":\"DJ0nmxdg\",\"guide_basic_option-chain.md\":\"1crAkqm-\",\"guide_basic_reactive.md\":\"ZEZ7uVds\",\"guide_basic_refs.md\":\"BlYk9tcG\",\"guide_basic_single-file.md\":\"pOorh032\",\"guide_basic_start.md\":\"CBAczrxY\",\"guide_basic_template.md\":\"Bcxqv41D\",\"guide_basic_two-way-binding.md\":\"B_KA2k94\",\"guide_composition-api_composition-api.md\":\"Bh8pACFE\",\"guide_composition-api_reactive-api.md\":\"WOHtEb5G\",\"guide_extend_api-proxy.md\":\"CKVZi01O\",\"guide_extend_fetch.md\":\"DoVBrdcs\",\"guide_extend_index.md\":\"B-AnIYDs\",\"guide_extend_mock.md\":\"CfZHEPBA\",\"guide_migrate_2.7.md\":\"BRNs6PtI\",\"guide_migrate_2.8.md\":\"DUgpXI5-\",\"guide_migrate_2.9.md\":\"DZXr1Vtv\",\"guide_migrate_mpx-cli-3.md\":\"BlX0YUtQ\",\"guide_platform_basic.md\":\"WikgVNAd\",\"guide_platform_miniprogram.md\":\"X8yJCeEN\",\"guide_platform_rn.md\":\"DsXthOYo\",\"guide_platform_web.md\":\"CcHiVFzp\",\"guide_tool_e2e-test.md\":\"EMUVz3nW\",\"guide_tool_ts.md\":\"CH10H8U-\",\"guide_tool_unit-test.md\":\"BNWMp2Lt\",\"guide_understand_compile.md\":\"DS5TaIwp\",\"guide_understand_runtime.md\":\"Cc3uol1G\",\"index.md\":\"CGEi3GTg\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Mpx 框架\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"displayDetails\":\"显示详细列表\",\"resetButtonTitle\":\"重置搜索\",\"backButtonTitle\":\"关闭搜索\",\"noResultsText\":\"没有结果\",\"footer\":{\"selectText\":\"选择\",\"selectKeyAriaLabel\":\"输入\",\"navigateText\":\"导航\",\"navigateUpKeyAriaLabel\":\"上箭头\",\"navigateDownKeyAriaLabel\":\"下箭头\",\"closeText\":\"关闭\",\"closeKeyAriaLabel\":\"esc\"}}}}},\"logo\":\"/favicon.ico\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/didi/mpx\"}],\"nav\":[{\"text\":\"指南\",\"activeMatch\":\"^/guide/\",\"link\":\"/guide/basic/start\"},{\"text\":\"API\",\"activeMatch\":\"^/api/\",\"link\":\"/api/\"},{\"text\":\"文章\",\"activeMatch\":\"^/articles/\",\"link\":\"/articles/\"},{\"text\":\"更新记录\",\"activeMatch\":\"^/releases/\",\"link\":\"https://github.com/didi/mpx/releases\",\"target\":\"_blank\"}],\"outline\":{\"level\":[2,3],\"label\":\"本页目录\"},\"sidebar\":{\"/guide/\":[{\"text\":\"基础\",\"collapsable\":false,\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/basic/start\"},{\"text\":\"介绍\",\"link\":\"/guide/basic/intro\"},{\"text\":\"单文件开发\",\"link\":\"/guide/basic/single-file\"},{\"text\":\"IDE 高亮配置\",\"link\":\"/guide/basic/ide\"},{\"text\":\"模板语法\",\"link\":\"/guide/basic/template\"},{\"text\":\"CSS 处理\",\"link\":\"/guide/basic/css\"},{\"text\":\"数据响应\",\"link\":\"/guide/basic/reactive\"},{\"text\":\"类名样式绑定\",\"link\":\"/guide/basic/class-style-binding\"},{\"text\":\"条件渲染\",\"link\":\"/guide/basic/conditional-render\"},{\"text\":\"列表渲染\",\"link\":\"/guide/basic/list-render\"},{\"text\":\"事件处理\",\"link\":\"/guide/basic/event\"},{\"text\":\"双向绑定\",\"link\":\"/guide/basic/two-way-binding\"},{\"text\":\"自定义组件\",\"link\":\"/guide/basic/component\"},{\"text\":\"获取组件实例/节点信息\",\"link\":\"/guide/basic/refs\"},{\"text\":\"模版内可选链表达式\",\"link\":\"/guide/basic/option-chain\"}]},{\"text\":\"进阶\",\"collapsable\":false,\"items\":[{\"text\":\"状态管理（store）\",\"link\":\"/guide/advance/store\"},{\"text\":\"状态管理（pinia）\",\"link\":\"/guide/advance/pinia\"},{\"text\":\"使用 mixin\",\"link\":\"/guide/advance/mixin\"},{\"text\":\"使用 npm\",\"link\":\"/guide/advance/npm\"},{\"text\":\"使用分包\",\"link\":\"/guide/advance/subpackage\"},{\"text\":\"分包异步化\",\"link\":\"/guide/advance/async-subpackage\"},{\"text\":\"跨平台\",\"link\":\"/guide/advance/platform\"},{\"text\":\"国际化 i18n\",\"link\":\"/guide/advance/i18n\"},{\"text\":\"包体积分析\",\"link\":\"/guide/advance/size-report\"},{\"text\":\"图像资源处理\",\"link\":\"/guide/advance/image-process\"},{\"text\":\"原生渐进迁移\",\"link\":\"/guide/advance/progressive\"},{\"text\":\"原生能力兼容\",\"link\":\"/guide/advance/ability-compatible\"},{\"text\":\"小程序插件\",\"link\":\"/guide/advance/plugin\"},{\"text\":\"自定义路径\",\"link\":\"/guide/advance/custom-output-path\"},{\"text\":\"使用原子类\",\"link\":\"/guide/advance/utility-first-css\"},{\"text\":\"SSR\",\"link\":\"/guide/advance/ssr\"},{\"text\":\"依赖注入（Provide/Inject）\",\"link\":\"/guide/advance/provide-inject\"},{\"text\":\"编译配置\",\"link\":\"/guide/advance/build-config\"}]},{\"text\":\"跨端\",\"collapsable\":false,\"items\":[{\"text\":\"跨端输出基础\",\"link\":\"/guide/platform/basic\"},{\"text\":\"跨端输出 RN\",\"link\":\"/guide/platform/rn\"}]},{\"text\":\"组合式 API\",\"collapsable\":false,\"items\":[{\"text\":\"组合式 API\",\"link\":\"/guide/composition-api/composition-api\"},{\"text\":\"响应式 API\",\"link\":\"/guide/composition-api/reactive-api\"}]},{\"text\":\"工具\",\"collapsable\":false,\"items\":[{\"text\":\"使用TypeScript开发小程序\",\"link\":\"/guide/tool/ts\"},{\"text\":\"单元测试\",\"link\":\"/guide/tool/unit-test\"},{\"text\":\"E2E自动化测试\",\"link\":\"/guide/tool/e2e-test\"}]},{\"text\":\"拓展\",\"collapsable\":false,\"items\":[{\"text\":\"网络请求\",\"link\":\"/guide/extend/fetch\"},{\"text\":\"API 转换\",\"link\":\"/guide/extend/api-proxy\"},{\"text\":\"数据 Mock\",\"link\":\"/guide/extend/mock\"}]},{\"text\":\"理解\",\"collapsable\":false,\"items\":[{\"text\":\"Mpx运行时增强原理\",\"link\":\"/guide/understand/runtime\"},{\"text\":\"Mpx编译构建原理\",\"link\":\"/guide/understand/compile\"}]},{\"text\":\"迁移\",\"collapsable\":false,\"items\":[{\"text\":\"从 2.8 升级至 2.9\",\"link\":\"/guide/migrate/2.9\"},{\"text\":\"从 2.7 升级至 2.8\",\"link\":\"/guide/migrate/2.8\"},{\"text\":\"从旧版本迁移至 2.7\",\"link\":\"/guide/migrate/2.7\"},{\"text\":\"mpx-cli v2 迁移到 v3\",\"link\":\"/guide/migrate/mpx-cli-3\"}]}],\"/api/\":[{\"text\":\"API\",\"collapsable\":false,\"items\":[{\"text\":\"API 参考\",\"link\":\"/api/\"},{\"text\":\"全局配置\",\"link\":\"/api/app-config\"},{\"text\":\"全局 API\",\"link\":\"/api/global-api\"},{\"text\":\"实例 API\",\"link\":\"/api/instance-api\"},{\"text\":\"Store API\",\"link\":\"/api/store-api\"},{\"text\":\"模板指令\",\"link\":\"/api/directives\"},{\"text\":\"编译构建\",\"link\":\"/api/compile\"},{\"text\":\"内建组件\",\"link\":\"/api/builtIn\"},{\"text\":\"响应式 API\",\"link\":\"/api/reactivity-api\"},{\"text\":\"组合式 API\",\"link\":\"/api/composition-api\"},{\"text\":\"选项式 API\",\"link\":\"/api/optional-api\"},{\"text\":\"周边拓展\",\"link\":\"/api/extend\"}]}],\"/articles/\":[{\"text\":\"文章\",\"collapsable\":false,\"items\":[{\"text\":\"滴滴开源小程序框架Mpx\",\"link\":\"/articles/1.0\"},{\"text\":\"Mpx 发布2.0，完美支持跨平台开发\",\"link\":\"/articles/2.0\"},{\"text\":\"小程序框架运行时性能大测评\",\"link\":\"/articles/performance\"},{\"text\":\"小程序开发者，为什么你应该尝试下MPX\",\"link\":\"/articles/mpx1\"},{\"text\":\"Mpx 小程序框架技术揭秘\",\"link\":\"/articles/mpx2\"},{\"text\":\"滴滴出行小程序体积优化实践\",\"link\":\"/articles/size-control\"},{\"text\":\"使用Typescript新特性Template Literal Types完善链式key的类型推导\",\"link\":\"/articles/ts-derivation\"},{\"text\":\"Mpx2.7 版本正式发布，大幅提升编译构建速度\",\"link\":\"/articles/2.7-release\"},{\"text\":\"Mpx2.8 版本正式发布，使用组合式 API 开发小程序\",\"link\":\"/articles/2.8-release\"},{\"text\":\"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化\",\"link\":\"/articles/2.9-release\"},{\"text\":\"小程序跨端组件库 Mpx-cube-ui 开源啦\",\"link\":\"/articles/mpx-cube-ui\"},{\"text\":\"@mpxjs/cli 插件化改造\",\"link\":\"/articles/mpx-cli-next\"},{\"text\":\"Mpx 小程序单元测试能力建设与实践\",\"link\":\"/articles/unit-test\"}]}]},\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"菜单\",\"returnToTopLabel\":\"返回顶部\",\"langMenuLabel\":\"语言\",\"notFound\":{\"title\":\"页面未找到\",\"linkText\":\"返回首页\",\"quote\":\"😩 抱歉，迷路了～\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"}},\"locales\":{\"/\":{\"label\":\"中文\",\"lang\":\"zh-CN\",\"title\":\"Mpx 框架\",\"description\":\"深度性能优化的增强型小程序开发框架\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script> </body> </html>