我们都知道,Lightning Web Component (LWC)是Salesforce中用于构建Lightning组件的编程模型之一。这是一项在Salesforce开发人员中流行的技术,也是Salesforce推荐的。你知道为什么它被广泛使用吗?因为它速度快,重量轻。
使用基于组件的开发的主要目的是性能和可重用性。如果你正在创建lightning web组件,你必须遇到需要在它们之间进行通信的场景。通信是指在两个或多个组件之间传递数据。有两种情况。任何一个组件都是通过某种类型的关系(如Parent-Child relationship)相互连接的,或者它们彼此独立,即不相关。
所以,在这篇博客中,我们将讨论:
- 亲子沟通。
- 孩子和父母之间的交流。
亲子沟通
顾名思义,当父组件在其HTML文件中包含子组件标签并将数据传递给子组件时,就会在两个组件之间发生父组件到子组件的通信。为了将数据传递给子组件,我们需要在子组件中定义一个带有@api装饰器的变量,该变量是公共的,并且可以从父组件中访问。
注意:用于定义响应式公共属性的@api装饰器。
让我们考虑一个简单的例子来更好地理解它。这里我们定义了一个变量getValueFromParent在子组件中使用@api decorator,并在HTML模板中使用它在子组件中显示它的值。
现在转向父组件,在父组件中声明一个变量,将其传递给子组件。这里我们创建了价值变量,并赋给它一个字符串字面值。要将值传递给子组件,需要将子组件的标签添加到父HTML模板中,并将值作为属性赋给子组件的属性。
亲子沟通
正如我们所看到的,从父节点传递公共属性并在子节点中接收它是实现父节点到子节点通信的最简单方法。在父子通信的情况下,它是有点复杂。在子组件中,我们将使用CustomEvent将值传递给父组件。
注意:CustomEvent构造函数有一个必需的参数:一个字符串,它引用事件类型。
在本例中,当用户在lightning输入字段中输入内容时,组件创建并分派调用的CustomEventgetsearchvalue事件。事件中包含数据细节财产。
对象中的getsearchvalue事件被父组件监听ongetsearchvalue属性中处理它handleSearchValue事件处理程序。在handleSearchValue中,我们从事件中分配值。detail到searchValue变量。
这样,我们就可以有效地进行亲子沟通。请记住,在上面的示例中,组件是相关的,但是当组件通过父子关系不相关时,我们可以使用pubsub模型和lightning message service (LMS)执行通信。
引用:
- https://developer.salesforce.com/blogs/2021/05/inter-component-communication-patterns-for-lightning-web-components
- https://trailhead.salesforce.com/en/content/learn/projects/communicate-between-lightning-web-components
- https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_create_dispatch
- https://developer.salesforce.com/blogs/2019/10/lightning-message-service-developer-preview
- https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_pubsub