События в LWC используются для связи с компонентами. Если есть связанные компоненты, можно обеспечить связь от родителя к дочернему элементу или от дочернего элемента к родительскому. Если есть два несвязанных компонента, мы можем взаимодействовать через модель PubSub (публикация-подписка) или с помощью службы сообщений Lightning (LMS). В этом руководстве мы обсудим, как взаимодействовать с событиями от родителя к дочернему элементу, от дочернего элемента к родительскому и взаимосвязанным компонентам с использованием модели PubSub.
Вы можете разместить компоненты на странице записи, странице приложения или домашней странице. Мы не будем снова указывать этот файл (meta-xml) в примерах фрагментов кода:
XML-версия '=' '1,0' ?>
< LightningComponentBundle xmlns '=' 'http://soap.sforce.com/2006/04/metadata' >
< APIVersion > 57,0 APIVersion >
< isExposed > истинный isExposed >
< цели >
< цель > молния__RecordPage цель >
< цель > молния__AppPage цель >
< цель > молния__Главная страница цель >
цели >
МолнияКомпонентПакет >
Общение родителей с детьми
Если два компонента связаны друг с другом, такая связь возможна. Здесь Родитель отправляет данные Дочернему элементу. Родительский компонент содержит дочерний компонент. При таком подходе мы можем передавать примитивные данные (целое число, строку, логическое значение и т. д.) от родителя к дочернему элементу, передавать непримитивные данные (массив, объект, массив объектов и т. д.) от родительского элемента к дочернему, передавая данные в Дочерний компонент с действием на Родителя.
Чтобы передать родительский элемент дочернему компоненту, нам необходимо сделать поля, свойства и методы, доступные в дочернем компоненте, общедоступными. Этого можно добиться, украсив поля, свойства и методы декоратором «api».
Пример : Объявите переменную с «api» в файле «js» дочернего компонента.
@ переменная API ;
Теперь родительский компонент использует дочерний компонент в файле HTML через атрибуты HTML.
Пример : используйте переменную в родительском HTML-файле.
< с - ребенок - переменная комп. >/ с - ребенок - комп >
Давайте обсудим несколько примеров, описывающих, как общаться между родителями и детьми.
Пример 1:
Этот базовый пример демонстрирует получение информации, которая отправляется родителем дочернему элементу.
childtComp.js
Сначала мы создаем дочерний компонент, который содержит общедоступную переменную «информация».
// Объявляем переменную как общедоступную с помощью API-декоратора@ информация API
Вы можете просмотреть весь код «js» на следующем снимке экрана:
childtComp.html
Теперь мы указываем эту переменную в HTML-файле внутри центрального тега.
< шаблон >< молния - название карты '=' 'Ребенок' >
< центр >
< б > { информация } б >
центр >
молния - карта >
шаблон >
родительскийкомп.js
Мы ничего не делаем в файле «js».
родительскийкомп.html
Поместите предыдущий дочерний компонент в родительский HTML, передав общедоступную переменную (информацию) с текстом.
< шаблон >< молния - название карты '=' «Родитель» икона - имя '=' 'стандарт:учетная запись' >
< с - ребенок - комп
информация '=' «Здравствуйте, я получил информацию...»
>/ с - ребенок - комп >
молния - карта >
шаблон >
Выход:
Теперь перейдите в свою организацию Salesforce и поместите родительский компонент на страницу «Запись». Вы увидите, что дочерний компонент получил информацию от родителя.
Пример 2:
Давайте создадим два текстовых поля ввода, которые будут динамически принимать текст из пользовательского интерфейса в родительском компоненте. Если мы вставим первый текст в родительский компонент, дочерний компонент получит этот текст в верхнем регистре. Аналогично, он получит текст в нижнем регистре, если мы вставим второй текст.
childtComp.js
Создайте две переменные — Information1 и Information2 — с помощью декоратора дорожки.
- Создайте метод ConvertToUpper() с декоратором «api», который преобразует первый входной текст в верхний регистр.
- Создайте метод ConvertToLower() с декоратором «api», который преобразует второй входной текст в нижний регистр.
@ Информация о треке2 ;
@ API
конвертироватьтоуппер ( фактическая информация1 ) {
этот . Информация1 '=' актуальная информация1. toUpperCase ( ) ;
}
@ API
ConvertToLower ( фактическая информация1 ) {
этот . Информация2 '=' актуальная информация1. в нижний регистр ( ) ;
}
Весь код «js» выглядит следующим образом:
childtComp.html
Мы отображаем значения (Информация1 и Информация2), полученные из файла «js».
< шаблон >< молния - название карты '=' 'Ребенок' >
Верхний регистр :& nbsp ; < б > { Информация1 } б >< бр >
Нижний регистр :& nbsp ; < б > { Информация2 } б >
молния - карта >
шаблон >
родительскийкомп.js
Мы создаем два метода-обработчика, которые выбирают дочерний HTML-шаблон через querySelector(). Убедитесь, что вам нужно передать правильные методы, преобразующие текст в верхний или нижний регистр.
handleEvent1 ( событие ) {этот . шаблон . запросселектор ( 'c-childt-comp' ) . конвертироватьтоуппер ( событие. цель . ценить ) ;
}
handleEvent2 ( событие ) {
этот . шаблон . запросселектор ( 'c-childt-comp' ) . ConvertToLower ( событие. цель . ценить ) ;
}
Весь код «js» выглядит следующим образом:
родительскийкомп.html
Создайте входной текст с событиями обработки для них обоих. Поместите дочерний компонент в этот родительский компонент.
< шаблон >< молния - название карты '=' «Родитель» >
< центр >
< молния - входная метка '=' «Введите текст строчными буквами» по изменению '=' { handleEvent1 } >/ молния - вход >
центр >
< бр >< бр >
< центр >
< молния - входная метка '=' «Введите текст заглавными буквами» по изменению '=' { handleEvent2 } >/ молния - вход >
центр >
< бр >< бр >< бр >
< с - ребенок - комп >/ с - ребенок - комп >
молния - карта >
шаблон >
Выход:
Теперь перейдите в свою организацию Salesforce и поместите родительский компонент на страницу «Запись».
Вы увидите два текстовых ввода в пользовательском интерфейсе.
Давайте напишем текст в первом вводе, и вы увидите, что текст преобразуется в верхний регистр и отображается в дочернем компоненте.
Напишите какой-нибудь текст во втором поле ввода, и вы увидите, что текст преобразуется в нижний регистр и отображается в дочернем компоненте.
Общение ребенка с родителем
Как и в предыдущем сообщении, чтобы сообщить Ребенка Родителю, оба компонента должны быть связаны друг с другом. Мы можем передать дочерний элемент родителю тремя различными подходами: вызов родителя дочернему элементу с помощью простого события и вызов родительского элемента дочернему элементу с использованием события с данными и восходящим потоком событий. В этом руководстве мы рассмотрим простое событие.
Чтобы передать дочерний элемент родителю, нам необходимо создать и отправить события. Для этого необходимо создать специальное событие. Пользовательское событие — это событие, которое создается вами. Мы можем создать его, используя новое ключевое слово. Event_Name может быть любым (это может быть строка, не выходящая за пределы верхнего регистра, или цифры). Варианты пока обсуждать не будем.
Синтаксис : новый CustomEvent('Event_Name',{options…})
Теперь у вас есть пользовательское событие. Следующим шагом является отправка события. Чтобы отправить событие, нам нужно указать событие, которое мы создали, в методе EventTarget.dispatchEvent().
Синтаксис : this.displatchEvent(new CustomEvent('Event_Name',{options…})
Наконец, нам нужно обработать событие. Теперь нам нужно вызвать дочерний компонент в вашем родительском компоненте. Передайте название вашего мероприятия, указав префикс «on» к имени вашего события. Это принимает обработчик прослушивателя событий.
Синтаксис:
< с - ребенок - компонент onyourEventName '=' { слушательHandler } >/ с - ребенок - компонент >Пример:
В этом примере мы создаем один родительский компонент (exampleParent) и два дочерних компонента.
- В первом дочернем элементе (exampleChild) мы создаем входной текст, который позволяет пользователю вводить некоторый текст. Тот же текст отображается в родительском компоненте заглавными буквами.
- Во втором дочернем элементе (child2) мы создаем входной текст, который позволяет пользователю вводить некоторый текст. Тот же текст отображается в родительском компоненте строчными буквами.
примерChild.js
Мы создаем метод handleChange1, который создает CustomEvent «linuxhintevent1» с подробностями в качестве целевого значения. После этого мы отправляем это событие. Вставьте следующий фрагмент в этот файл «js».
// обрабатываем событиеhandleChange1 ( событие ) {
событие. предотвратить по умолчанию ( ) ;
константа имя1 '=' событие. цель . ценить ;
константа выберитеСобытие1 '=' новый CustomEvent ( 'linuxhintevent1' , {
деталь : имя1
} ) ;
этот . диспетчерское событие ( выберитеСобытие1 ) ;
}
примерChild.html
Предыдущий метод дескриптора, созданный в «js», обрабатывается на основе ввода Lightning в компоненте HTML.
< шаблон >< молния - название карты '=' «Ребенок 1» >
< div сорт '=' 'slds-m-around_medium' >
< молния - метка ввода '=' «Введите текст строчными буквами» по изменению '=' { handleChange1 } >/ молния - вход >
div >
молния - карта >
шаблон >
child2.js
Мы создаем метод handleChange2, который создает CustomEvent «linuxhintevent2» с подробностями в качестве целевого значения. После этого мы отправляем это событие.
handleChange2 ( событие ) {событие. предотвратить по умолчанию ( ) ;
константа имя2 '=' событие. цель . ценить ;
константа выберитеСобытие2 '=' новый CustomEvent ( 'linuxhintevent2' , {
деталь : имя2
} ) ;
этот . диспетчерское событие ( выберитеСобытие2 ) ;
}
child2.html
Предыдущий метод дескриптора, созданный в «js», обрабатывается на основе ввода Lightning в компоненте HTML.
< шаблон >< молния - название карты '=' «Ребенок 2» >
< div сорт '=' 'slds-m-around_medium' >
< молния - метка ввода '=' «Введите текст заглавными буквами» по изменению '=' { handleChange2 } >/ молния - вход >
div >
молния - карта >
шаблон >
примерParent.js: Вставьте этот фрагмент в свой js-файл внутри класса.
- Преобразуйте ввод в верхний регистр с помощью функции toUpperCase() в handleEvent1() и сохраните его в переменной Information1.
- Преобразуйте ввод в нижний регистр с помощью функции toLowerCase() в handleEvent2() и сохраните его в переменной Information2.
// Преобразуем ввод в верхний регистр с помощью функции toUpperCase()
// в handleEvent1() и сохраняем в переменной Information1
handleEvent1 (событие) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@информация о треке2;
// Преобразуем ввод в нижний регистр с помощью функции toLowerCase()
// в handleEvent2() и сохраняем в переменной Information2
handleEvent2 (событие) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
примерParent.html
Теперь отобразите две переменные (Информация1 и Информация2) в родительском компоненте HTML, указав оба дочерних компонента.
<шаблон><карта-молния заголовок '=' «Родитель» >
< div сорт '=' 'slds-m-around_medium' >
Сообщение Child-1 в верхнем регистре: < б > {Информация1} < / б >< бр >
Сообщение Child-2 в нижнем регистре: < б > {Информация2} < / б >< бр >
< / б >< бр >
< / div >
< / молния-карта>
< / шаблон>
Выход:
Теперь перейдите в свою организацию Salesforce и поместите родительский компонент на страницу «Запись».
Вы можете видеть, что в родительском компоненте существуют два дочерних компонента.
Давайте введем некоторый текст во входной текст под компонентом «Ребенок 1». Мы видим, что наш текст отображается в верхнем регистре в родительском компоненте.
Введите некоторый текст во входной текст под компонентом Child 2. Мы видим, что наш текст отображается в нижнем регистре в родительском компоненте.
Также возможно ввести оба текста одновременно.
Модель PubSub
Когда вы работаете с независимыми компонентами (не связанными друг с другом) и хотите передавать информацию от одного компонента к другому, вы можете использовать эту модель. PubSub означает публикацию и подписку. Компонент, отправляющий данные, называется издателем, а компонент, получающий данные, — подписчиком. Для отправки событий между компонентами необходимо использовать модуль pubsub. Он уже предопределен и предоставлен Salesforce. Имя файла — pubsub. Вам необходимо создать компонент LWC и ввести этот код в файл javascript «pubsub.js».
Пример:
Давайте создадим два компонента — «Опубликовать» и «Подписаться».
В публикации мы разрешаем пользователям создавать вводимый текст. При нажатии на кнопку данные поступают в верхнем и нижнем регистре в компоненте «Подписаться».
публикация.js
Вставьте этот код в свой файл JSON. Здесь мы получаем информацию и публикуем ее.
Информационная переменная будет записана в верхнем регистре, а Information1 — в нижнем. Убедитесь, что вы включили этот оператор импорта в начало кода — импортируйте pubsub из «c/pubsub».
информацияинформация2
// Получаем информацию в верхнем и нижнем регистре
информацияОбработчик ( событие ) {
этот . информация '=' событие. цель . ценить ;
этот . информация2 '=' событие. цель . ценить ;
}
// Публикуем обе информации (в верхнем и нижнем регистре)
опубликоватьОбработчик ( ) {
pubsub. публиковать ( 'Публиковать' , этот . информация )
pubsub. публиковать ( 'Публиковать' , этот . информация2 )
}
Это должно выглядеть так:
опубликовать.html
Сначала мы создаем вход Lightning для приема текста с информацией обработчика. После этого создается одна кнопка с функцией onclick. Эти функции находятся в предыдущем фрагменте кода «js».
<шаблон><карта-молния заголовок '=' «Опубликуй свой текст» >
<молния-вход тип '=' 'текст' включение клавиатуры '=' { информацияОбработчик } >< / молниеносный вход>
<кнопка-молния по щелчку '=' { опубликоватьОбработчик } этикетка '=' «Отправить данные» >< / кнопка-молния>
< / молния-карта>
< / шаблон>
подписаться.js
Вставьте этот код в свой файл JSON. Здесь мы сначала подписываем информацию, преобразуя ее в верхний и нижний регистр отдельно внутри метода callSubscriber(). После этого мы вызываем этот метод через метод linkedcallback(). Убедитесь, что вы включили этот оператор импорта в начало кода — импортируйте pubsub из «c/pubsub».
информацияинформация2
// вызов callSubscriber()
подключенОбратный вызов ( ) {
этот . звонокАбонент ( )
}
// Подписываем информацию, преобразуя ее в верхний регистр
звонокАбонент ( ) {
pubsub. подписаться ( 'Публиковать' , ( информация ) => {
этот . информация '=' информация. toUpperCase ( ) ;
} ) ,
// Подписываем информацию, преобразуя ее в нижний регистр
pubsub. подписаться ( 'Публиковать' , ( информация2 ) => {
этот . информация2 '=' информация2. в нижний регистр ( ) ;
} )
}
Это должно выглядеть так:
подписаться.html
Мы отображаем текст в верхнем регистре (хранится в Information) и нижнем регистре (хранится в Information2).
<шаблон><карта-молния заголовок '=' 'Подписаться' >
< div сорт '=' 'slds-p-around_medium' >
Информация, полученная в верхнем регистре - < б > {информация} < / б >< бр >
Полученная информация строчными буквами - < б > {информация2} < / б >
< / div >
< / молния-карта>
< / шаблон>
Выход:
Добавьте эти два компонента на свою страницу. Убедитесь, что оба компонента находятся на одной странице. В противном случае функционал не будет работать.
Давайте введем текст в компонент «Опубликовать» и нажмите кнопку «Отправить данные». Мы видим, что текст получен в верхнем и нижнем регистре.
Заключение
Теперь мы можем взаимодействовать с компонентами LWC через концепцию событий в Salesforce LWC. В рамках этого руководства мы узнали, как общаться от Родителя к Ребенку и от Ребенка к Родителю. Модель PubSub используется в том случае, если ваши компоненты не связаны друг с другом (не Родитель-Дочерний). Каждый сценарий объясняется на простом примере. Обязательно включите код, представленный в начале этого руководства, в файл «meta-xml».