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>

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

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

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

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

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

嵌套组件如何在模板中工作？

1 个答案: