javascript - 嵌套组件如何在 Stencil 中工作？

Question

我在 Stencil 的官方文档中找到了这些片段。

我无法理解如何在 my-parent-component 中访问 my-embedded-component 不提供子组件的路径。谁能帮我理解这个概念？

子组件

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-embedded-component'
})
export class MyEmbeddedComponent {
  @Prop() color: string = 'blue';

  render() {
    return (
    <div>My favorite color is {this.color}</div>
    );
  }
}

父组件

import { Component } from '@stencil/core';

@Component({
  tag: 'my-parent-component'
})
export class MyParentComponent {

  render() {
    return (
      <div>
        <my-embedded-component color="red"></my-embedded-component>
      </div>
    );
  }
}

Answer 1

没有路径。这种关系是因为元素嵌套在 HTML 源代码中而创建的。

在纯 HTML 中，以下结构(div 中的一个段落)在 DOM 中创建父/子关系:

<div>
    <p>Hello World!</p>
</div>

您通过在 MyParentComponent 的模板中使用 my-embedded-component 来做同样的事情。在页面上呈现父组件之前，初始 HTML 源代码类似于:

<my-parent-component>
    <div>
        <my-embedded-component color="red"></my-embedded-component>
    </div>
</my-parent-component>

然后对其进行编译以应用各个组件中描述的行为。

@Component 装饰器中的 tag 属性定义了您在 HTML 中使用的自定义标签的名称。

当 Angular 编译器读取您的初始 HTML 源代码时，它会查找必须转换的指令(标签、属性等)。当这些指令嵌套时，它会创建隐式关系:父级可以使用子级的某些属性，反之亦然。