LWC – Sự kiện

Lwc Su Kien



Các sự kiện trong LWC được sử dụng để giao tiếp với các thành phần. Nếu có các thành phần liên quan thì có thể giao tiếp từ Parent tới Child hoặc Child to Parent. Nếu có hai thành phần không liên quan, chúng ta có thể giao tiếp thông qua mô hình PubSub (Xuất bản-Đăng ký) hoặc với Dịch vụ Tin nhắn Lightning (LMS). Trong hướng dẫn này, chúng ta sẽ thảo luận về cách giao tiếp với các sự kiện từ Parent to Child, Child to Parent và các thành phần có liên quan với nhau bằng mô hình PubSub.

Bạn có thể đặt các thành phần trong Trang bản ghi, Trang ứng dụng hoặc Trang chủ. Chúng tôi sẽ không chỉ định lại tệp này (meta-xml) trong đoạn mã ví dụ:





phiên bản xml = '1.0' ?>

< LightningComponentGói xmlns = 'http://soap.sforce.com/2006/04/metadata' >

< apiPhiên bản > 57,0 apiPhiên bản >

< được tiếp xúc > ĐÚNG VẬY được tiếp xúc >

< mục tiêu >

< mục tiêu > sét__Trang bản ghi mục tiêu >

< mục tiêu > sét__Trang ứng dụng mục tiêu >

< mục tiêu > sét__Trang chủ mục tiêu >

mục tiêu >

Gói thành phần sét >

Giao tiếp giữa cha mẹ và con cái

Nếu hai thành phần có liên quan với nhau thì việc giao tiếp này có thể thực hiện được. Tại đây, Parent gửi dữ liệu cho Child. Thành phần cha mẹ chứa thành phần Con. Với cách tiếp cận này, chúng ta có thể truyền dữ liệu Nguyên thủy (Số nguyên, Chuỗi, Boolean, v.v.) từ Cha mẹ sang Con cái, truyền dữ liệu Không Nguyên thủy (Mảng, Đối tượng, Mảng đối tượng, v.v.) từ Cha mẹ sang Con cái, truyền dữ liệu đến thành phần Con với hành động trên thành phần Cha mẹ.



Để giao tiếp giữa Parent với Child, chúng ta cần hiển thị công khai các trường, thuộc tính và phương thức có sẵn trong thành phần Child. Điều này có thể thực hiện được bằng cách trang trí các trường, thuộc tính và phương thức bằng trình trang trí “api”.



Ví dụ : Khai báo một biến có “api” trong tệp “js” thành phần con.





@ biến api ;

Bây giờ, thành phần Parent sử dụng thành phần Child trong tệp HTML thông qua các thuộc tính HTML.

Ví dụ : Sử dụng biến trong tệp HTML gốc.



< c - đứa trẻ - biến comp > c - đứa trẻ - máy tính >

Hãy cùng thảo luận về một số ví dụ mô tả cách giao tiếp giữa Cha mẹ với Con cái.

Ví dụ 1:

Ví dụ cơ bản này minh họa việc nhận được thông tin do Parent gửi cho Child.

childtComp.js

Đầu tiên, chúng ta tạo thành phần Con chứa biến “thông tin” được cung cấp công khai.

// Khai báo biến ở chế độ public bằng cách sử dụng Decorator api

@ thông tin api

Bạn có thể xem toàn bộ mã “js” trong ảnh chụp màn hình sau:

childtComp.html

Bây giờ, chúng tôi chỉ định biến này trong tệp HTML trong thẻ trung tâm.

< bản mẫu >

< tia sét - tiêu đề thẻ = 'Đứa trẻ' >

< trung tâm >



< b > { thông tin } b >

trung tâm >

tia sét - Thẻ >

bản mẫu >

parentComp.js

Chúng tôi không làm bất cứ điều gì trong tệp “js”.

parentComp.html

Đặt thành phần Con trước đó vào HTML gốc của bạn bằng cách chuyển biến công khai (thông tin) cùng với một số văn bản.

< bản mẫu >

< tia sét - tiêu đề thẻ = 'Cha mẹ' biểu tượng - tên = 'tiêu chuẩn:tài khoản' >



< c - đứa trẻ - máy tính

thông tin = 'Xin chào, tôi đã nhận được thông tin...'

> c - đứa trẻ - máy tính >

tia sét - Thẻ >


bản mẫu >

Đầu ra:

Bây giờ, hãy truy cập Salesforce Org của bạn và đặt thành phần Gốc vào trang “Bản ghi”. Bạn sẽ thấy thành phần Child đã nhận được thông tin từ Parent.

Ví dụ 2:

Hãy tạo hai trường văn bản đầu vào sẽ chấp nhận văn bản một cách linh hoạt từ giao diện người dùng trong thành phần Chính. Nếu chúng ta chèn văn bản đầu tiên vào thành phần Parent, thành phần con sẽ nhận được văn bản này bằng chữ in hoa. Tương tự, nó nhận văn bản viết thường nếu chúng ta chèn văn bản thứ hai.

childtComp.js

Tạo hai biến – thông tin1 và thông tin2 – bằng trình trang trí bản nhạc.

  1. Tạo phương thức ConvertToUpper() với trình trang trí “api” để chuyển văn bản đầu vào đầu tiên thành chữ hoa.
  2. Tạo phương thức ConvertToLower() với trình trang trí “api” để chuyển đổi văn bản đầu vào thứ hai thành chữ thường.
@ Theo dõi thông tin1 ;

@ theo dõi thông tin2 ;

@ API

chuyển đổiToUpper ( thông tin thực tế1 ) {

cái này . Thông tin1 = Thông tin thực tế1. Đến trường hợp trên ( ) ;

}

@ API

chuyển đổiToLower ( thông tin thực tế1 ) {

cái này . Thông tin2 = Thông tin thực tế1. toLowerCase ( ) ;

}

Toàn bộ mã “js” trông giống như sau:

childtComp.html

Chúng tôi hiển thị các giá trị (Thông tin1 và Thông tin2) đến từ tệp “js”.

< bản mẫu >

< tia sét - tiêu đề thẻ = 'Đứa trẻ' >

Chữ hoa :& nbsp ; < b > { Thông tin1 } b >< anh >

Chữ thường :& nbsp ; < b > { Thông tin2 } b >

tia sét - Thẻ >

bản mẫu >

parentComp.js

Chúng tôi tạo hai phương thức xử lý để chọn mẫu HTML con thông qua querySelector(). Đảm bảo rằng bạn cần truyền đúng các phương thức chuyển đổi văn bản thành chữ hoa hoặc chữ thường.

xử lýEvent1 ( sự kiện ) {

cái này . bản mẫu . bộ chọn truy vấn ( 'c-childt-comp' ) . chuyển đổiToUpper ( sự kiện. mục tiêu . giá trị ) ;

}

xử lýEvent2 ( sự kiện ) {

cái này . bản mẫu . bộ chọn truy vấn ( 'c-childt-comp' ) . chuyển đổiToLower ( sự kiện. mục tiêu . giá trị ) ;

}

Toàn bộ mã “js” trông giống như sau:

parentComp.html

Tạo văn bản đầu vào có xử lý các sự kiện cho cả hai. Đặt thành phần Con vào thành phần Cha mẹ này.

< bản mẫu >

< tia sét - tiêu đề thẻ = 'Cha mẹ' >

< trung tâm >

< tia sét - nhãn đầu vào = 'Nhập văn bản bằng chữ thường' trao đổi = { xử lýEvent1 } > tia sét - đầu vào >

trung tâm >

< anh >< anh >

< trung tâm >

< tia sét - nhãn đầu vào = 'Nhập văn bản bằng chữ in hoa' trao đổi = { xử lýEvent2 } > tia sét - đầu vào >

trung tâm >

< anh >< anh >< anh >



< c - đứa trẻ - máy tính > c - đứa trẻ - máy tính >

tia sét - Thẻ >

bản mẫu >

Đầu ra:

Bây giờ, hãy truy cập Salesforce Org của bạn và đặt thành phần Gốc vào trang “Bản ghi”.

Bạn sẽ thấy hai kiểu nhập văn bản trên giao diện người dùng.

Hãy viết một số văn bản trong dữ liệu nhập đầu tiên và bạn sẽ thấy văn bản đó được chuyển thành chữ hoa và hiển thị trong thành phần Con.

Viết một số văn bản ở kiểu nhập thứ hai và bạn sẽ thấy văn bản đó được chuyển thành chữ thường và hiển thị trong thành phần Con.

Giao tiếp giữa trẻ em và phụ huynh

Tương tự như giao tiếp trước đó, để giao tiếp Trẻ với Phụ huynh, cả hai thành phần phải liên quan với nhau. Chúng ta có thể giao tiếp Cấp độ trẻ với Cấp độ cha mẹ theo ba cách tiếp cận khác nhau: gọi Cấp độ cha mẹ đến Cấp độ trẻ bằng cách sử dụng một sự kiện đơn giản và gọi Cấp độ cha mẹ đến Cấp độ trẻ bằng cách sử dụng một sự kiện có dữ liệu và sự kiện sủi bọt. Chúng ta sẽ xem xét sự kiện đơn giản trong hướng dẫn này.

Để liên lạc với Child với Parent, chúng ta cần tạo và gửi các sự kiện. Để làm được điều đó, một sự kiện tùy chỉnh phải được tạo. Sự kiện tùy chỉnh là sự kiện do chính bạn tạo ra. Chúng ta có thể tạo nó bằng từ khóa mới. Event_Name có thể là bất cứ thứ gì (có thể là một chuỗi, không nằm ngoài chữ hoa hoặc chữ số). Hiện tại, chúng ta sẽ không thảo luận về các lựa chọn.

Cú pháp : CustomEvent mới(‘Event_Name’,{options…})

Bây giờ, bạn có sự kiện tùy chỉnh. Bước tiếp theo là gửi sự kiện. Để gửi sự kiện, chúng ta cần chỉ định sự kiện mà chúng ta đã tạo trong phương thức EventTarget.dispatchEvent().

Cú pháp :  this.displatchEvent(new CustomEvent('Event_Name',{options…})

Cuối cùng, chúng ta cần xử lý sự kiện này. Bây giờ, chúng ta phải gọi thành phần con trong thành phần Parent của bạn. Chuyển tên sự kiện của bạn bằng cách chỉ định tiền tố “bật” cho tên sự kiện của bạn. Điều này cần có trình xử lý trình xử lý sự kiện.

Cú pháp:

< c - đứa trẻ - thành phần onyourEventName = { người ngheHandler } > c - đứa trẻ - thành phần >

Ví dụ:

Trong ví dụ này, chúng ta tạo một thành phần Parent (exampleParent) và hai thành phần Con.

  1. Trong Child đầu tiên (exampleChild), chúng tôi tạo một văn bản đầu vào cho phép người dùng cung cấp một số văn bản. Văn bản tương tự được hiển thị trong thành phần Parent bằng chữ hoa.
  2. Trong Child thứ hai (child2), chúng tôi tạo một văn bản đầu vào cho phép người dùng cung cấp một số văn bản. Văn bản tương tự được hiển thị trong thành phần Parent bằng chữ thường.

ví dụChild.js

Chúng tôi tạo một phương thức handChange1 để tạo CustomEvent “linuxhintevent1” với chi tiết là giá trị mục tiêu. Sau đó, chúng tôi gửi sự kiện này. Nhúng đoạn mã sau vào tệp “js” này.

// xử lý sự kiện

xử lýChange1 ( sự kiện ) {

sự kiện. ngăn chặn Mặc định ( ) ;
hằng số tên1 = sự kiện. mục tiêu . giá trị ;
hằng số chọnSự kiện1 = mới Sự kiện tùy chỉnh ( 'linuxhintevent1' , {
chi tiết : tên1
} ) ;
cái này . công vănSự kiện ( chọnSự kiện1 ) ;

}

ví dụChild.html

Phương thức xử lý trước đó được tạo trong “js” được xử lý dựa trên đầu vào Lightning trong thành phần HTML.

< bản mẫu >

< tia sét - tiêu đề thẻ = 'Đứa trẻ 1' >

< div lớp học = 'slds-m-around_medium' >

< tia sét - nhãn đầu vào = 'Nhập văn bản bằng chữ thường' trao đổi = { xử lýChange1 } > tia sét - đầu vào >

div >

tia sét - Thẻ >

bản mẫu >

con2.js

Chúng tôi tạo một phương thức handChange2 để tạo CustomEvent “linuxhintevent2” với chi tiết làm giá trị đích. Sau đó, chúng tôi gửi sự kiện này.

xử lýChange2 ( sự kiện ) {

sự kiện. ngăn chặn Mặc định ( ) ;
hằng số tên2 = sự kiện. mục tiêu . giá trị ;
hằng số chọnSự kiện2 = mới Sự kiện tùy chỉnh ( 'linuxhintevent2' , {
chi tiết : tên2
} ) ;
cái này . công vănSự kiện ( chọnSự kiện2 ) ;


}

con2.html

Phương thức xử lý trước đó được tạo trong “js” được xử lý dựa trên đầu vào Lightning trong thành phần HTML.

< bản mẫu >

< tia sét - tiêu đề thẻ = 'Đứa trẻ 2' >

< div lớp học = 'slds-m-around_medium' >

< tia sét - nhãn đầu vào = 'Nhập văn bản bằng chữ hoa' trao đổi = { xử lýChange2 } > tia sét - đầu vào >

div >

tia sét - Thẻ >

bản mẫu >

exampleParent.js: Nhúng đoạn mã này vào tệp “js” của bạn trong lớp.

  1. Chuyển đổi đầu vào thành chữ hoa bằng cách sử dụng hàm toUpperCase() trong handEvent1() và lưu nó trong biến Information1
  2. Chuyển đổi đầu vào thành chữ thường bằng cách sử dụng hàm toLowerCase() trong handEvent2() và lưu nó trong biến Information2.
@track Thông tin1;

// Chuyển đổi đầu vào thành chữ hoa bằng hàm toUpperCase()
// trong hàm handEvent1() và lưu vào biến Information1
xử lýEvent1(sự kiện) {
const input1 = sự kiện.detail;
this.Information1 = input1.toUpperCase();
}


@track Thông tin2;


// Chuyển đổi đầu vào thành chữ thường bằng hàm toLowerCase()
// trong hàm handEvent2() và lưu vào biến Information2
xử lýEvent2 (sự kiện) {
const input2 = sự kiện.detail;
this.Information2 = input2.toLowerCase();


}

exampleParent.html

Bây giờ, hãy hiển thị hai biến (Thông tin1 & Thông tin2) trong thành phần HTML gốc bằng cách chỉ định cả hai thành phần Con.



tiêu đề = 'Cha mẹ' >


< div lớp học = 'slds-m-around_medium' >

Tin nhắn Child-1 viết hoa: < b > {Thông tin1} < / b >< anh >

Thông báo Child-2 bằng chữ thường: < b > {Thông tin2} < / b >< anh >

= { xử lýEvent1 } >< / c-ví dụ-con>


< / b >< anh >

= { xử lýEvent2 } >< / c-con2>


< / div >

< / thẻ sét>

< / mẫu>

Đầu ra:

Bây giờ, hãy truy cập Salesforce Org của bạn và đặt thành phần Gốc vào trang “Bản ghi”.

Bạn có thể thấy có hai thành phần Child tồn tại trong Parent.

Hãy nhập một số văn bản vào văn bản đầu vào trong thành phần Child 1. Chúng ta có thể thấy rằng văn bản của chúng ta được hiển thị bằng chữ in hoa trên thành phần Parent.

Cung cấp một số văn bản trong văn bản đầu vào trong thành phần Child 2. Chúng ta có thể thấy rằng văn bản của chúng ta được hiển thị bằng chữ thường trên thành phần Parent.

Cũng có thể nhập cả hai văn bản cùng một lúc.

Mô hình PubSub

Khi bạn đang làm việc với các thành phần độc lập (không liên quan với nhau) và nếu bạn muốn gửi thông tin từ thành phần này sang thành phần khác, bạn có thể sử dụng mô hình này. PubSub là viết tắt của Xuất bản và Đăng ký. Thành phần gửi dữ liệu được gọi là Nhà xuất bản và thành phần nhận dữ liệu được gọi là Người đăng ký. Cần phải sử dụng mô-đun pubsub để gửi các sự kiện giữa các thành phần. Nó đã được Salesforce xác định trước và cung cấp. Tên tập tin là pubsub. Bạn phải tạo một thành phần LWC và nhập mã này vào tệp javascript của mình, đó là “pubsub.js”.

Ví dụ:

Hãy tạo hai thành phần – Xuất bản và Đăng ký.

Trong Xuất bản, chúng tôi cho phép người dùng tạo văn bản đầu vào. Khi nhấp vào nút, dữ liệu sẽ được nhận bằng chữ hoa và chữ thường trong thành phần Đăng ký.

xuất bản.js

Nhúng mã này vào tệp JSON của bạn. Ở đây, chúng tôi lấy thông tin và công bố thông tin.

Biến thông tin sẽ là chữ hoa và thông tin1 sẽ là chữ thường. Đảm bảo rằng bạn đưa câu lệnh nhập này vào đầu mã – nhập pubsub từ ‘c/pubsub’.

thông tin

thông tin2
// Lấy thông tin bằng chữ hoa và chữ thường
thông tin xử lý ( sự kiện ) {
cái này . thông tin = sự kiện. mục tiêu . giá trị ;
cái này . thông tin2 = sự kiện. mục tiêu . giá trị ;
}


// Xuất bản cả thông tin (Chữ hoa và chữ thường)
xuất bảnHandler ( ) {
pubsub. công bố ( 'Công bố' , cái này . thông tin )
pubsub. công bố ( 'Công bố' , cái này . thông tin2 )

}

Nó sẽ trông giống như:

xuất bản.html

Đầu tiên, chúng ta tạo đầu vào sét để chấp nhận văn bản có thông tin xử lý. Sau đó, một nút có chức năng onclick sẽ được tạo. Các hàm này có trong đoạn mã “js” trước đó.



tiêu đề = 'Xuất bản văn bản của bạn' >


<đầu vào sét kiểu = 'chữ' bật khóa = { thông tin xử lý } >< / đầu vào sét>

trong một cái nhấp chuột = { xuất bảnHandler } nhãn = 'Gửi dữ liệu' >< / nút sét>


< / thẻ sét>

< / mẫu>

đăng ký.js

Nhúng mã này vào tệp JSON của bạn. Ở đây, trước tiên chúng ta Đăng ký thông tin bằng cách chuyển đổi nó thành chữ hoa và chữ thường riêng biệt bên trong phương thức callSubscriber(). Sau đó, chúng ta gọi phương thức này thông qua phương thức connectcallback(). Đảm bảo rằng bạn đưa câu lệnh nhập này vào đầu mã – nhập pubsub từ ‘c/pubsub’.

thông tin

thông tin2

// gọi callSubscriber()

đã kết nốiGọi lại ( ) {

cái này . người đăng ký cuộc gọi ( )
}
// Đăng ký thông tin bằng cách chuyển thành chữ hoa
người đăng ký cuộc gọi ( ) {


pubsub. đặt mua ( 'Công bố' , ( thông tin ) => {

cái này . thông tin = thông tin. Đến trường hợp trên ( ) ;

} ) ,


// Đăng ký thông tin bằng cách chuyển thành chữ thường


pubsub. đặt mua ( 'Công bố' , ( thông tin2 ) => {

cái này . thông tin2 = thông tin2. toLowerCase ( ) ;

} )


}

Nó sẽ giống như thế này:

đăng ký.html

Chúng tôi hiển thị văn bản bằng chữ hoa (được lưu trong thông tin) và chữ thường (được lưu trong thông tin2).



tiêu đề = 'Đặt mua' >


< div lớp học = 'slds-p-around_medium' >

Thông tin nhận được bằng chữ hoa - < b > {thông tin} < / b >< anh >

Thông tin nhận được bằng chữ thường - < b > {thông tin2} < / b >

< / div >

< / thẻ sét>

< / mẫu>

Đầu ra:

Thêm hai thành phần này vào trang của bạn. Đảm bảo rằng cả hai thành phần đều ở trên cùng một trang. Nếu không, chức năng sẽ không hoạt động.

Hãy nhập một số văn bản vào thành phần “Xuất bản” và nhấp vào nút “Gửi dữ liệu”. Chúng ta có thể thấy rằng văn bản được nhận bằng chữ hoa và chữ thường.

Phần kết luận

Giờ đây, chúng tôi có thể giao tiếp với các thành phần LWC thông qua khái niệm sự kiện trong Salesforce LWC. Là một phần của hướng dẫn này, chúng tôi đã học cách giao tiếp từ Phụ huynh đến Trẻ em và từ Trẻ em đến Phụ huynh. Model PubSub được sử dụng trong trường hợp các thành phần của bạn không liên quan tới nhau (không phải Parent – ​​Child). Mỗi tình huống được giải thích bằng một ví dụ đơn giản và đảm bảo rằng bạn đưa mã được cung cấp ở đầu hướng dẫn này vào tệp “meta-xml”.