嵌套组件如何在 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 源代码时，它会查找必须转换的指令（标签、属性等）。当这些指令嵌套时，它会创建隐式关系：父级可能会使用子级的某些属性，反之亦然。