اجزای وب لایتنینگ: اجزای تو در تو سفارشی

Lightning Web Runtime یا به اختصار LWR در بهار 21 (نسخه 51.0) منتشر شد. حتی قبل از انتشار LWR، اکثر توسعه دهندگان رویای توانایی ساخت اجزای تو در تو سفارشی را داشتند. می‌توانیم ببینیم که مؤلفه‌های OOTB (خارج از جعبه) می‌توانند از آنها استفاده کنند (به مؤلفه Tabs مراجعه کنید).

Salesforce اخیراً توانایی ساخت LWCهای سفارشی با کودک را منتشر کرده است <slot/>‘s، برای اجازه دادن به تودرتوی اجزا. LWC های تو در تو به شما این امکان را می دهند که چندین مؤلفه را با هم در یک جزء واحد ترکیب کنید. اجزای کودک چرخه زندگی خود را حفظ می کنند و می توانند از طریق رویدادها با یکدیگر ارتباط برقرار کنند و ایجاد برنامه های انعطاف پذیر و پویا را آسان می کند.

قبل از ادامه، انجمن‌های مبتنی بر Aura (متاسفانه) پشتیبانی نمی‌شوند. بنابراین اگر در حال حاضر از آنها استفاده می کنید، ممکن است زمان آن رسیده است که به LWR تغییر دهید.

مثال کد

صحبت کافی است، بیایید وارد کد شویم و ببینیم که جادو اتفاق می افتد.

HTML

ما با ایجاد قالب HTML برای نگه داشتن ما شروع می کنیم <slot/>‘s

<template>
  <template if:false={isAura}>
    <div class="container">
      <div>
        <slot name="region1"></slot>
      </div>
      <div>
        <slot name="region2"></slot>
      </div>
      <div>
        <slot name="region3"></slot>
      </div>
    </div>
  </template>
</template>

جاوا اسکریپت

حالا اجازه دهید نگاهی به جاوا اسکریپت بیندازیم. بخش مهم (یا جادو) در اینجا این است @slot تعاریف در نظر مستقیماً بالای صادرات LWC. بدون این تعاریف، اجزای پویا کار نمی کنند.

این isAura بررسی همچنین اطمینان حاصل می کند که این مؤلفه هنگام استفاده از یک جامعه مبتنی بر Aura، هشداری را در سازنده تجربه نشان می دهد.

import { LightningElement } from 'lwc'

/**
 * @slot region1
 * @slot region2
 * @slot region3
 */
export default class NestedLWCs extends LightningElement {
  get isAura() {
    return window['$A'] !== undefined && window['$A'] !== null
  }
}

فراداده XML

مطمئن شوید که .xml فایل به گونه ای تنظیم شده است که در سازنده تجربه موجود باشد. مقادیر کلیدی در حال تنظیم هستند isExposed به true و از جمله هر دو lightningCommunity__Page و lightningCommunity__Default مانند targets.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>57.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Nested LWCs</masterLabel>
  <description>Nested LWC magic</description>
  <targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
  </targets>
</LightningComponentBundle>

سازنده تجربه

اکنون اجازه دهید Experience Builder را باز کنیم و LWC سفارشی خود را در عمل ببینیم.

ما همچنین می‌توانیم کامپوننت‌ها را درون اجزای تودرتوی دیگر قرار دهیم. من از هیچ محدودیتی در اینجا آگاه نیستم. من توانستم تا 10 سطح را بدون هیچ مشکلی در اعماق قرار دهم، توجه داشته باشم که این پایان نامه ها LWC های بسیار آزمایشی هستند. LWCهای پیچیده تر ممکن است بر عملکرد تأثیر بگذارند.

بسته بندی

به طور خلاصه، LWC های تو در تو، راه قدرتمند و انعطاف پذیری را برای توسعه دهندگان فراهم می کند تا اجزای سفارشی ایجاد کنند که می تواند از چندین مؤلفه دیگر تشکیل شده باشد، که ساخت برنامه های پویا و قابل استفاده مجدد را در پلتفرم Experience Cloud آسان تر می کند.