LWC-001_Event
2024-10-12 10:33:56
文章来源： Events (lwc.dev)
1. 监控子组件的动作:
Child.html <template>
<button>Click</button> </template> Parent.html <template> <c-child></c-child> </template> Parent.JS import { LightningElement } from 'lwc'; export default class App extends LightningElement {
renderedCallback(){
this.template.querySelector('c-child').addEventListener('click',
this.handleClick);
} handleClick(e){
// Your code here
alert('This is come from p');
}
}
2. 普通的一个Action
<div>
<button onclick={handlePrevious}>Previous</button>
<button onclick={handleNext} class="right">Next</button>
</div> handlePrevious() {
this.dispatchEvent(new CustomEvent('previous'));
alert('P')
} handleNext() {
this.dispatchEvent(new CustomEvent('next'));
alert('N')
}
The CustomEvent() constructor has one required parameter, which is a string indicating the event type. As a component author, you name the event type when you create the event. The event type is the name of the event. You can use any string as your event type. However, we recommend that you conform with the DOM event standard.
- No uppercase letters
- No spaces
- Use underscores to separate words
3.
Child.html
<template>
<div>
<button onclick={handlePrevious}>Previous</button>
<button onclick={handleNext} class="right">Next</button>
</div>
</template> child.js
import { LightningElement } from "lwc"; /**
* Show an item
*/
export default class Child extends LightningElement {
handlePrevious() {
this.dispatchEvent(new CustomEvent('previous1'));
} handleNext() {
this.dispatchEvent(new CustomEvent('next'));
}
} parent
4. child pass Data to Parent
参照Recipes上的例子：lwc-recipes/force-app/main/default/lwc/contactListItem at main · trailheadapps/lwc-recipes · GitHub
lwc-recipes/eventWithData.html at main · trailheadapps/lwc-recipes · GitHub
另外实际项目上的代码
CreateFolder、FavoriteView
5. parent to child
6. 动态添加Option下拉选项值：
https://salesforce.stackexchange.com/questions/275530/dynamically-update-lightning-combobox-lightning-web-component
https://developer.salesforce.com/forums/?id=9062I000000DHcLQAW
最新文章
- iOS推送小结（证书的生成、客户端的开发、服务端的开发）
- 优先级反转实验，使用信号量实现【RT-Thread学习笔记 5】
- js正则表达式(常用)
- obeject-c 与 swift 混编
- ubuntu 下安装memcache 以及php扩展
- 状态压缩codeforces 11 D
- VS2010 asp.net development server 无法展示svg图片
- nodejs配置简单HTTP服务器
- Spring 依赖注入，在Main方法中取得Spring控制的实例
- java基础之hashmap
- 利用LibreOffice转换ppt、doc转化pdf
- C#产生不重复的随机数并生成随机文件名
- KVM 虚拟机命令行安装配置
- new 运算符
- Winform 窗体的操作
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
- 认识 web 服务器端脚本语言 PHP
- 童话故事 --- 什么是SQL Server Browser
- AspNetPager分页控件的使用方法
- 某些浏览器具有dns缓存功能，大家更改域名指向，建议清理下浏览器缓存