自定义元素:访问另一个元素的 属性

Custom Elements: Access the property of another element

我正在使用 Lit 自定义元素:

我在我的组件 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>
//....

I am using component A in my component B and want to access the property letters of B (from child to parent element). How do I do that?

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

原因如下:

你的思想观念有问题,违反了组件的基本思想。组件旨在封装它们所做的事情;子组件永远不会访问其自身范围之外的组件(包括任何父组件)。一个组件不应该知道关于它的上下文的任何信息(也就是说,它们的父级或任何其他祖先,除了那些总是存在的(例如 document.body,甚至只有当你的组件是 connected,您可以随时通过布尔值 built-in-property this.isConnected)) 进行检查。这个概念被称为de-coupling,被广泛认为是组件化世界中的架构go-to-standard。

否则,你就是那个上下文的 hard-wiring 你的组件,当你想 re-use 在其他上下文中使用该组件时,它要么无用,要么抛出错误。

如果有任何来自外部的东西并且组件需要了解它(例如数据),则通过属性或特性将其传递给子组件。

如果组件本身无法处理与子组件的交互,则通过自定义事件通知外界。在那种情况下,任何祖先组件的工作都是接受这个(然后它会有一个该事件的侦听器),并对它做一些事情,如果结果应该影响那个子组件,然后将它传递到该组件中,再次通过属性或特性,或者通过例如调用可能是子组件发出的自定义事件数据的一部分的回调。