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

import{ax as s,z as i,A as a,b2 as e}from"./chunks/framework.DkLJC2NO.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(l,t,o,p,h,r){return a(),i("div",null,[...t[0]||(t[0]=[e(`<h1 id="node" tabindex="-1">Node <a class="header-anchor" href="#node" aria-label="Permalink to &quot;Node&quot;">​</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 &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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 &quot;NodeOptions&quot;">​</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 &quot;属性&quot;">​</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</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 &quot;实例方法&quot;">​</a></h2><h3 id="setdata" tabindex="-1">setData <a class="header-anchor" href="#setdata" aria-label="Permalink to &quot;setData&quot;">​</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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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 &quot;addEventToQueue&quot;">​</a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{EventConfig} event</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></ul><h3 id="setinstance" tabindex="-1">setInstance <a class="header-anchor" href="#setinstance" aria-label="Permalink to &quot;setInstance&quot;">​</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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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="runhookcode" tabindex="-1">runHookCode <a class="header-anchor" href="#runhookcode" aria-label="Permalink to &quot;runHookCode&quot;">​</a></h3><ul><li><p><strong>参数：</strong></p><ul><li><code>{&#39;created&#39; | &#39;mounted&#39;} hook</code> 钩子名称</li><li><code>{object} params</code> 参数</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;any&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>执行节点的钩子代码。</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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 &quot;destroy&quot;">​</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 &quot;生命周期事件&quot;">​</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 &quot;监听示例&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><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>`,27)])])}const E=s(d,[["render",n]]);export{k as __pageData,E as default};