tmagic-editor/docs/assets/runtime-api_core_node.md.DLCapBPL.js

import{ax as s,z as i,A as e,b5 as a}from"./chunks/framework.V2ssSR2R.js";const k=JSON.parse('{"title":"Node","description":"","frontmatter":{},"headers":[],"relativePath":"runtime-api/core/node.md","filePath":"runtime-api/core/node.md"}'),d={name:"runtime-api/core/node.md"};function n(o,t,l,h,r,p){return e(),i("div",null,[...t[0]||(t[0]=[a(`<h1 id="node" tabindex="-1">Node <a class="header-anchor" href="#node" aria-label="Permalink to “Node”">​</a></h1><p><code>Node</code> 是 <code>@tmagic/core</code> 的节点基类，继承自 <code>EventEmitter</code>，表示 DSL 中的一个节点。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to “构造函数”">​</a></h2><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: NodeOptions)</span></span></code></pre></div><h3 id="nodeoptions" tabindex="-1">NodeOptions <a class="header-anchor" href="#nodeoptions" aria-label="Permalink to “NodeOptions”">​</a></h3><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>config</code></td><td><code>MNode</code></td><td>节点配置</td></tr><tr><td><code>parent</code></td><td><code>Node</code></td><td>父节点（可选）</td></tr><tr><td><code>page</code></td><td><code>Page</code></td><td>所属页面（可选）</td></tr><tr><td><code>app</code></td><td><code>App</code></td><td>应用实例</td></tr></tbody></table><h2 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to “属性”">​</a></h2><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>data</code></td><td><code>MNode</code></td><td>节点配置数据</td></tr><tr><td><code>style</code></td><td><code>object</code></td><td>节点样式</td></tr><tr><td><code>events</code></td><td><code>EventConfig[]</code></td><td>事件配置</td></tr><tr><td><code>instance</code></td><td><code>any</code></td><td>组件实例</td></tr><tr><td><code>page</code></td><td><code>Page | undefined</code></td><td>所属页面</td></tr><tr><td><code>parent</code></td><td><code>Node | undefined</code></td><td>父节点</td></tr><tr><td><code>app</code></td><td><code>App</code></td><td>应用实例</td></tr><tr><td><code>store</code></td><td><code>Store</code></td><td>节点存储</td></tr><tr><td><code>eventKeys</code></td><td><code>Map&lt;string, symbol&gt;</code></td><td>事件键映射</td></tr></tbody></table><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><ul><li><p><strong>参数：</strong></p><ul><li><code>{MNode} data</code> 节点数据</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>设置节点数据，会更新 <code>data</code>、<code>style</code> 和 <code>events</code> 属性。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">node.</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;">  id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button_1&#39;</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;">&#39;button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  style: { width: </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;">  events: []</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="addeventtoqueue" tabindex="-1">addEventToQueue <a class="header-anchor" href="#addeventtoqueue" aria-label="Permalink to “addEventToQueue”">​</a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{EventCache} event</code> 待处理事件项；类型为 <code>{ method: string, fromCpt: any, args: any[] }</code></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>将事件添加到节点内部的事件队列，等待组件实例 <code>mounted</code> 后再依次调用对应的方法（<code>instance[event.method](event.fromCpt, ...event.args)</code>）。</p></li></ul><h3 id="setinstance" tabindex="-1">setInstance <a class="header-anchor" href="#setinstance" aria-label="Permalink to “setInstance”">​</a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{any} instance</code> 组件实例</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>设置组件实例，并绑定队列中的事件。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 通常在组件挂载时调用</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">node.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(componentInstance);</span></span></code></pre></div><h3 id="registermethod" tabindex="-1">registerMethod <a class="header-anchor" href="#registermethod" aria-label="Permalink to “registerMethod”">​</a></h3><div class="warning custom-block"><p class="custom-block-title">@deprecated</p><p>该方法已废弃，请使用 <code>setInstance</code> 替代。</p></div><ul><li><p><strong>参数：</strong></p><ul><li><code>{Methods} methods</code> 方法集合，形如 <code>{ [name: string]: (...args: any[]) =&gt; any }</code></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>将给定方法挂载到 <code>instance</code> 上。如果当前 <code>instance</code> 不存在，会先创建一个空对象再合并方法。</p></li></ul><h3 id="runhookcode" tabindex="-1">runHookCode <a class="header-anchor" href="#runhookcode" aria-label="Permalink to “runHookCode”">​</a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{string} hook</code> 钩子名称（如 <code>&#39;created&#39;</code>、<code>&#39;mounted&#39;</code>、<code>&#39;destroy&#39;</code> 等，由节点 schema 决定）</li><li><code>{object} params</code> 参数（可选）</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>执行节点的钩子代码。内部会根据节点 schema 中 <code>hook</code> 字段的实际形态进行处理：</p><ul><li>兼容旧格式：当 <code>data[hook]</code> 直接是函数时，作为函数调用；</li><li>新格式：当 <code>data[hook]</code> 是 <code>{ hookType, hookData[] }</code> 且 <code>hookType === HookType.CODE</code> 时，按顺序遍历 <code>hookData</code>，根据 <code>codeType</code> 调用 <code>app.runCode</code> 或 <code>app.runDataSourceMethod</code>。</li></ul></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> node.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">runHookCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;mounted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { data: someData });</span></span></code></pre></div><h3 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to “destroy”">​</a></h3><ul><li><p><strong>返回：</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情：</strong></p><p>销毁节点，清理事件监听和组件实例。</p></li></ul><h2 id="生命周期事件" tabindex="-1">生命周期事件 <a class="header-anchor" href="#生命周期事件" aria-label="Permalink to “生命周期事件”">​</a></h2><p>Node 实例会触发以下生命周期事件：</p><table tabindex="0"><thead><tr><th>事件名</th><th>说明</th></tr></thead><tbody><tr><td><code>created</code></td><td>组件创建完成时触发</td></tr><tr><td><code>mounted</code></td><td>组件挂载完成时触发</td></tr><tr><td><code>destroy</code></td><td>组件销毁时触发</td></tr><tr><td><code>update-data</code></td><td>数据更新时触发</td></tr></tbody></table><h3 id="监听示例" tabindex="-1">监听示例 <a class="header-anchor" href="#监听示例" aria-label="Permalink to “监听示例”">​</a></h3><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">node.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;mounted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">&#39;组件已挂载&#39;</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:#24292E;--shiki-dark:#E1E4E8;">node.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;update-data&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">&#39;数据已更新&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newData);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div>`,30)])])}const g=s(d,[["render",n]]);export{k as __pageData,g as default};