fes.js/assets/qiankun.html.f373a5be.js

import{_ as c,r as p,o as i,c as l,b as s,d as n,a,w as u,f as e}from"./app.0e52fd78.js";const r={},d=s("h1",{id:"fesjs-plugin-qiankun",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-qiankun","aria-hidden":"true"},"#"),n(" @fesjs/plugin-qiankun")],-1),k={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},v={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},m=e(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;@fesjs/plugin-qiankun&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步：注册子应用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 注册子应用信息</span>
            <span class="token literal-property property">apps</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;app1&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>
                    <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&#39;//localhost:8001&#39;</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>
                    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 传递给子应用的数据</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;app2&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>
                    <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&#39;//localhost:8002&#39;</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当使用 <code>vite</code> 构建时需注意，<strong>name</strong> 必须跟子应用 <code>package.json</code>的 <code>name</code>保持一致。</p><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步：装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径！！！待完善...</p></div><p>假设我们的系统之前有这样的一些路由：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
                <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/src/.fes/plugin-layout/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/onepiece&#39;</span><span class="token punctuation">,</span>
                        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/onepiece&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span><span class="token punctuation">,</span>
                            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span><span class="token punctuation">,</span>
                        <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>，只需要增加这样一些配置即可：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
                <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/src/.fes/plugin-layout/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/onepiece&#39;</span><span class="token punctuation">,</span>
                        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/onepiece&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span><span class="token punctuation">,</span>
                            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span><span class="token punctuation">,</span>
                        <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/son&#39;</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;son&#39;</span><span class="token punctuation">,</span>
                        <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>src/pages</code> 目录新建 <code>son.vue</code>：</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>config</span><span class="token punctuation">&gt;</span></span>
{
    &quot;name&quot;: &quot;son&quot;,
    &quot;title&quot;: &quot;子应用&quot;,
    &quot;microApp&quot;: &quot;app1&quot;
}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>config</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code>&lt;MicroApp /&gt;</code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。</p></div><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;app1&#39;</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            name<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code>&lt;MicroAppWithMemoHistory /&gt;</code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据 base 可以很方便的匹配起来，而且不存在冲突。但是当我们使用 <code>hash</code> 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，<code>&lt;MicroAppWithMemoHistory /&gt;</code> 出现了，完美解决上面的问题。</p><p><code>&lt;MicroAppWithMemoHistory /&gt;</code> 相比 <code>&lt;MicroApp /&gt;</code> ，需要多传入 <code>url</code> 参数，用于指定加载子应用什么路由页面。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;app1&#39;</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            name<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步：插件注册</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果使用 <code>vite</code> 构建，当执行 <code>dev</code> 时需要额外配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">useDevMode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步：配置运行时生命周期钩子（可选）</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象，并实现每一个生命周期钩子，其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">// 应用加载之前</span>
    <span class="token keyword">async</span> <span class="token function">bootstrap</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 bootstrap&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 应用 render 之前触发</span>
    <span class="token keyword">async</span> <span class="token function">mount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 mount&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 当 props 更新时触发</span>
    <span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 update&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 应用卸载之后触发</span>
    <span class="token keyword">async</span> <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 unmount&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p>`,36),b={id:"配合-usemodel-使用",tabindex:"-1"},g=s("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),h=e(`<p>确保已经安装了 <code>@fesjs/plugin-model</code>：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;@fesjs/plugin-model&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用，直接通过 props 传递即可：</li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:user</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&#39;app1&#39;</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            name<span class="token punctuation">,</span>
            user<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>如果使用路由绑定式消费子应用，那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用，如：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        state<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>， 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> mainState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">&#39;qiankunStateFromMain&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            mainState<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）</li><li>子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称，传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称，配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称，传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称，配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table>`,16);function y(f,q){const t=p("ExternalLinkIcon"),o=p("RouterLink");return i(),l("div",null,[d,s("p",null,[n("Fes.js plugin for "),s("a",k,[n("qiankun"),a(t)]),n("，参考"),s("a",v,[n("@umijs/plugin-qiankun"),a(t)]),n(" 实现，喜欢 React 的同学推荐直接用 Umi。")]),m,s("h3",b,[g,n(" 配合 "),a(o,{to:"/reference/plugin/plugins/model.html"},{default:u(()=>[n("useModel")]),_:1}),n(" 使用")]),h])}const w=c(r,[["render",y],["__file","qiankun.html.vue"]]);export{w as default};