如何从Visualforce页面向Lightning组件及其属性传递值？

作为常年在Salesforce生态里摸爬滚打的开发者，我整理了几种最实用的方式，覆盖初始化传值和动态传值的场景，分Aura和LWC两种组件类型来说明：

一、直接通过组件属性传递（初始化场景首选） #

这是最直观的方式，适合在Lightning组件加载时就把Visualforce里的值传递过去，不管是Aura还是LWC都适用。

1. 针对LWC组件的实现 #

Lightning Web Component（LWC）端：

先在组件里定义可接收的公共属性，用@api装饰器标记：

// myLwcComponent.js
import { LightningElement, api } from 'lwc';

export default class MyLwcComponent extends LightningElement {
    // 定义公共属性，允许外部传入值
    @api recordId;
    @api customMessage;
}

对应的HTML可以直接使用这些属性：

<!-- myLwcComponent.html -->
<template>
    <p>从VF传入的记录ID：{recordId}</p>
    <p>从VF传入的自定义消息：{customMessage}</p>
</template>

Visualforce页面端：

先引入Lightning依赖，然后用$Lightning.createComponent方法创建组件时，把属性值通过attributes参数传递：

<apex:page>
    <apex:includeLightning />
    <div id="lwcContainer"></div>

    <script>
        // 页面加载完成后创建LWC组件
        document.addEventListener('DOMContentLoaded', function() {
            // 从VF页面获取值（可以是页面参数、Apex变量等）
            var vfRecordId = '{!$CurrentPage.parameters.recordId}';
            var vfCustomMsg = '来自Visualforce的问候！';

            $Lightning.createComponent(
                'c:myLwcComponent', // 组件API名称
                {
                    recordId: vfRecordId, // 对应LWC的@api属性
                    customMessage: vfCustomMsg
                },
                'lwcContainer', // 挂载的DOM容器ID
                function(component) {
                    console.log('LWC组件加载完成');
                }
            );
        });
    </script>
</apex:page>

2. 针对Aura组件的实现 #

Aura组件端：

先在组件的.cmp文件里定义属性：

<!-- myAuraComponent.cmp -->
<aura:component>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="customMessage" type="String" />

    <p>从VF传入的记录ID：{!v.recordId}</p>
    <p>从VF传入的自定义消息：{!v.customMessage}</p>
</aura:component>

Visualforce页面端：

同样用$Lightning.createComponent传递属性，语法和LWC类似：

<apex:page>
    <apex:includeLightning />
    <div id="auraContainer"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var vfRecordId = '{!$CurrentPage.parameters.recordId}';
            var vfCustomMsg = '来自Visualforce的问候！';

            $Lightning.createComponent(
                'c:myAuraComponent',
                {
                    recordId: vfRecordId, // 对应Aura的aura:attribute名称
                    customMessage: vfCustomMsg
                },
                'auraContainer',
                function(component) {
                    console.log('Aura组件加载完成');
                }
            );
        });
    </script>
</apex:page>

二、通过JavaScript事件传递（动态更新场景） #

如果需要在Visualforce页面的某个操作（比如按钮点击、表单提交）后，动态给Lightning组件传值，用事件传递是更灵活的方式。

以LWC为例的实现 #

LWC组件端：

监听全局事件，或者自定义事件：

// myLwcComponent.js
import { LightningElement, api } from 'lwc';

export default class MyLwcComponent extends LightningElement {
    currentValue = '';

    connectedCallback() {
        // 监听来自VF的全局事件
        window.addEventListener('vfUpdateLwcEvent', this.handleVfUpdate.bind(this));
    }

    disconnectedCallback() {
        // 组件销毁时移除监听，避免内存泄漏
        window.removeEventListener('vfUpdateLwcEvent', this.handleVfUpdate.bind(this));
    }

    handleVfUpdate(event) {
        // 获取VF传入的新值
        this.currentValue = event.detail.newValue;
        console.log('收到VF传来的新值：', this.currentValue);
    }
}

Visualforce页面端：

在需要触发的地方（比如按钮点击），派发全局事件：

<apex:page>
    <apex:includeLightning />
    <div id="lwcContainer"></div>
    <button onclick="sendValueToLwc()">点击给LWC传值</button>

    <script>
        let lwcComponent;
        document.addEventListener('DOMContentLoaded', function() {
            $Lightning.createComponent(
                'c:myLwcComponent',
                {},
                'lwcContainer',
                function(component) {
                    lwcComponent = component;
                }
            );
        });

        // 点击按钮时触发事件传值
        function sendValueToLwc() {
            var newValue = '动态更新的内容：' + new Date().toLocaleString();
            // 派发全局事件
            window.dispatchEvent(new CustomEvent('vfUpdateLwcEvent', {
                detail: { newValue: newValue }
            }));
        }
    </script>
</apex:page>

三、利用全局存储（跨页面/组件共享场景） #

如果需要在Visualforce和Lightning组件之间共享一些非敏感的状态值，可以用sessionStorage或localStorage，但注意不要存储敏感数据（比如客户信息、权限令牌）。

实现示例 #

Visualforce页面端：

// 在VF里存储值
sessionStorage.setItem('sharedValue', '{!Account.Name}');

Lightning组件端（LWC）：

// 在LWC的connectedCallback里获取值
connectedCallback() {
    var sharedValue = sessionStorage.getItem('sharedValue');
    if (sharedValue) {
        console.log('从VF的sessionStorage获取的值：', sharedValue);
    }
}

内容的提问来源于stack exchange，提问作者tina jacob