主页 / coding / 问题 / 79073776
Accepted
meez
Asked: 2024-10-10 17:48:19 +0800 CST

使用数据属性将 frontmatter 变量传递给脚本并在 JavaScript 类中使用

  • 772

我有以下Astro组件：

   ---
    type Props = {
      uuid: string;
    };
    
    const { uuid } = Astro.props;
    ---
    
    <div class="my-feature" data-uuid={uuid} id="my-feature"></div>
    
    <script is:inline src={import.meta.env.MY_SCRIPT}></script>
    
    <script>
      import { MyFeatureHelper } from '@/scripts/my-helper';
    
      let myFeature;
    
      const ref = document.getElementById('my-container');
    
      myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
        uuid: this?.ref.uuid,
      });
    
      myFeaturer.build();
    
    </script>

我需要按照这里所述将uuidprop 传递给<script>不带任何内容的标签，因为这样我的脚本将被视为，并且我无法导入我需要的 JavaScript 类。define:varsis:inlineMyFeatureHelper

我如何才能访问uuid并使用它，例如uuid: this?.ref.uuid使用数据属性技巧？

我怎样才能让它工作？

javascript

1 个回答

  1. Best Answer

    请参阅Astro 文档，其中有如何使用基本 Web 组件执行此操作的示例。

    或者，以下方法也可以起作用：

    ---
type Props = {
  uuid: string;
};

const { uuid } = Astro.props;
---

<div data-uuid={uuid} id="my-feature"></div>

<script>
  const uuid = document.getElementById('my-feature')?.dataset.uuid
</script>
    • 0

相关问题