LWC&Aura组件使用

最新推荐文章于 2024-11-19 13:18:24 发布

零糖小行星

最新推荐文章于 2024-11-19 13:18:24 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

分类专栏： salesforce 文章标签：开发语言

本文链接：https://blog.youkuaiyun.com/qq_57391462/article/details/133774119

salesforce 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了LWC和Aura组件的使用，包括LWC中的父子组件如何进行参数传递，页面初始化和跳转的实现，以及在AURA中如何关闭自带弹窗，并探讨了LWC如何触发 Aura 的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LWC

父子组件传参

组件名,参数名（遇大写，转为-小写）

父组件

aura

<div> 父组件
子组件：
<c:leadDemoPIPL onXXX="{!c.closeModal}" onrefresh="{!c.refreshView}" recordId="{!v.recordId}"/>
</div>

lwc

<c-lead-demo-p-i-p-i onXXX="{!c.closeModal}" onrefresh="{!c.refreshView}" recordId="{!v.recordId}"/>

子组件名

class 子组件{
    @api recordId//与父组件内定义一致
    
    //触发父组件方法
     const event1 = new CustomEvent('父组件引用处调用方法 == xxx', {
            // detail contains only primitives
                // detail: {}
            });
        this.dispatchEvent(event1);
}

页面初始化

//获取Id   有时@api未成功拿到记录id
    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) {
            const urlValue = currentPageReference.state.fragment;
            if (urlValue) {
                this.otherParams = urlValue;
                let str = `${urlValue}`;
                this.params = str.split('=');
                this.recordId = str.split('=')[1];
                this.IsParams = this.params[0] == 'id';
            }
        }
    }

    //页面初始化
    connectedCallback() {
        init({
            recordId: this.recordId,
            param: this.params[0],
        }).then(result => {
            result = JSON.parse(result);
            console.log('result',result);
            //compation 后台返回结果 - 改用前端直接提示
            if (result != null) {
                this.allData = result;
                //页面相关数据初始化
            }
        }).catch(error => {
        }).finally(() => {            
        }); 
    }

页面跳转

import { NavigationMixin } from 'lightning/navigation';
...
class 组件名 extends NavigationMixin(LightningElement) {
	navigateDonorDetails(){
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                recordId:this.recordId,
                objectApiName:'Account',
                actionName:'view'
            }
        });
    }
}

==========================================================

AURA

aura关闭自带弹窗

closeModal : function(cmp,event,helper){
        $A.get('e.force:closeQuickAction').fire();
    },

lwc触发

import { CloseActionScreenEvent } from 'lightning/actions';
this.dispatchEvent(new CloseActionScreenEvent());