0

我正在使用点亮的自定义元素：

我在组件 B 中使用组件 A 并希望访问 B 的属性字母（从子元素到父元素）。我怎么做？

// Component A
@customElement('a-component')
class AComponent extends LitElement {
  @property() public letters = ['a', 'b', 'c' ]
  //.....


// Component B
// ...
   <a-component id="a"></add-photo-component>
//....
4

1 回答 1

0

我在组件 B 中使用组件 A 并希望访问 B 的属性字母（从子元素到父元素）。我怎么做？

简单的回答：你没有。至少不是那个方向。如果组件 A 需要知道字母，让组件 B 通过属性或属性将其传递给 A。

原因如下：

您的思想概念是有问题的，因为它违反了组件的基本思想。组件旨在封装它们所做的事情；子组件永远不会访问其自身范围之外的组件（包括任何父组件）。一个组件不应该知道任何关于它的上下文（即，它们的父级或任何其他祖先，除了那些总是存在的（例如，即使是那些只有在你的组件已连接document.body时才应该访问，你总是可以通过布尔内置检查）在财产中））。这个概念被称为解耦，被广泛认为是组件化世界中的架构标准。this.isConnected

否则，您有点将组件硬连接到该上下文，当您想在其他上下文中重用该组件时，使其无用或抛出错误。

如果有任何来自外部的东西并且组件需要知道它（例如数据），则通过属性或属性将其传递给子组件。

如果与子组件的交互无法由组件本身处理，则通过自定义事件通知外界。在这种情况下，任何祖先组件的工作都是处理这个（然后它将有一个该事件的侦听器），并对其进行处理，如果结果应该影响该子组件，然后将它传递给该组件，再次通过属性或属性，或者通过调用可能是子组件已发出的自定义事件数据的一部分的回调。

于 2022-01-21T19:01:09.703 回答