了解如何使用 props 制作样式化的相框 Web 组件（学习 Modulo.js - 第 f 部分

？欢迎回来！没听懂第 1 部分吗？不用担心，您可以从头开始，也可以直接投入其中！

介绍：PictureFrame 组件

本教程中我们的任务是构建一个相框组件，用于在 Web 应用程序上设置照片样式。上次我们以一个有点像下面的片段结束。然而，在本教程中，我们更改了“模板”，以显示河马的粉红色/鲑鱼色“相框”，其下方有标题。要开始本教程，请将以下内容复制并粘贴到新文件中，然后在浏览器中打开：

<template Modulo>
    <Component name="PictureFrame">
        <Template>
            <div style="display: inline-block; border: 10px inset salmon; padding: 10px; margin: 10px; width: 100px; background: pink;">
                <img
                    style="width: 50px;"
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
                />
                <p>Photograph: <em>The Return of the Hippo</em></p>
            </div>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-PictureFrame></x-PictureFrame>

介绍第 2 部分

在本教程中，我们将向纯 HTML 组件添加 Style，并讨论 Modulo 框架中的第一个核心概念：组件部分，然后最后看看一个更重要的组件部分: 道具.

首先，您可能会注意到上面的代码有些混乱。所有的样式都被塞进一个 style= 属性中！在编写 CSS 代码时，将所有样式放入内联 style= 属性中通常很难维护。 Modulo 支持“Style”组件部分，让我们更自然地编写 CSS 代码。什么是组件？好吧，我们也会谈到这一点。首先，让我们时尚！

第 1 步：创建样式组件

<Template>
    <div class="salmon-frame">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" />
        <p>Photograph: <em>The Return of the Hippo</em></p>
    </div>
</Template>
<Style>
    img {
        width: 50px;
    }
    .salmon-frame {
        display: inline-block;
        border: 10px inset salmon;
        padding: 10px;
        margin: 10px;
        width: 100px;
        background: pink;
    }
</Style>

好多了！这看起来和行为很像 HTML 中的“Style”标签，允许您根据自己的喜好创建类和选择器。

第 2 步：设置主机组件本身的样式

通常，您需要设置 Web 组件本身的样式（在本例中为 标签）。我们可以为此使用特殊的 :host 选择器：

<Style>
    :host {
        text-align: center;
    }
    /* ... etc ... */
</Style>

零部件介绍

Modulo 的核心概念是组件部分。所有组件定义都由一定数量的组件部分组成。因此，组件定义实际上只是组件部分定义的集合。在组件的“底层”，每个组件部件都将发挥不同的作用来为组件的功能做出贡献。

我们已经学会了两个最基本的组件：

1. 模板 - - 模板是您放置您希望组件包含的任意 HTML 代码的位置。现在，我们只包含一些不变的 HTML。在下一个教程中，我们将学习如何使用“模板语言”来控制在什么情况下生成什么 HTML。

2. 风格 - - 就像一样HTML 中的标签。然而，它有一个一一重要的区别：包含的样式将仅限于您的组件。这是因为此处编写的 CSS 将自动添加前缀，以便它仅适用于您的组件以及模板组件部分生成的任何 HTML。这非常有用：它允许我们为每个组件编写独立的 CSS，甚至无需考虑它。保持 CSS 独立意味着更少的意外交互。

请记住，样式和模板都有很多可配置选项，但对于我们的使用来说，默认值就足够了。

道具介绍

现在，我们来介绍第三个重要的组件：Props

在上一节中，我们主要关注定义组件。回想一下，组件定义一次，但可以使用多次。 Props 的目的是在第二步中提供更大的灵活性：Props Component Part 定义了每次重用组件时可以自定义组件的属性。

给我们支持！

目前，我们的相框无法重复用于不同的照片或标题。我们不能永远被河马追赶！ ???

我们希望最终能够做这样的事情：

<x-PictureFrame
    image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
    caption="Hippopotamus out of water"
    photographer="Lee R. Berger"
></x-PictureFrame>

然后，它感觉就像一个“真正的”HTML 标签——也就是说，可以通过属性进行配置。 让我们“剥开层层”，看看如何使用 Props.

来实现这一点

第三步：添加道具

为了让组件在重用时能够“接收”props，我们必须定义 Props。 Props 定义与以前的定义类似，只不过它们没有内容，只是一个带有属性的开始标记，后面跟着一个结束标记。请参阅以下内容：

<Props
    image
    caption
    photographer
></Props>

注意：一个常见的错误是忘记包含 Props。您希望组件接收的每个属性都必须列在 Props 中才能用于下一步。

Step 4: Using Props in Template

Now, we'll get our first sneak peak at the true power of Templates: Adding in data and values into your HTML. You can use the following syntax to get your "props" and inject them into the generated HTML:

<div class="salmon-frame">
    <img src="{{ props.image }}" />
    <p>Photograph: <em>{{ props.caption }}</em></p>
    <p>Photographer: <em>{{ props.photographer }}</em></p>
</div>

Note the {{ and }}: This the templating syntax that indicates where the "props" values get inserted.

- Complete Example

Combining it all, we get the following results. Note how our custom Web Component can be re-used with different attributes:

Learn Modulo.js: Part 2
Style and Props
<x-PictureFrame
    image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
    caption="Hippopotamus out of water"
    photographer="Lee R. Berger"
></x-PictureFrame>

Conclusion

That's all for Part 2! Be sure to follow to catch the rest, and, as always, feel free to ask questions or suggestions in the comments.

以上是了解如何使用 props 制作样式化的相框 Web 组件（学习 Modulo.js - 第 f 部分的详细内容。更多信息请关注PHP中文网其他相关文章！