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

？欢迎回来！没听懂第 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 部分

Learn how to make a styled picture frame web component with props (Learn Modulo.js - Part f

在本教程中，我们将向纯 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 的核心概念是组件部分。所有组件定义都由一定数量的组件部分组成。因此，组件定义实际上只是组件部分定义的集合。在组件的“底层”，每个组件部件都将发挥不同的作用来为组件的功能做出贡献。

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

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