3

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

如果不提供 child component 的路径，我无法理解my-embedded-component如何在my-parent-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>
    );
  }
}
4

1 回答 1

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

于 2018-01-27T11:02:44.907 回答