Laravel 将纤细的组件注入现有应用程序？

是否可以在现有项目（laravel）中集成多个组件（库）？我尝试了一个，这不是一个问题（在前端），但有几个我不知道它将如何由后端实现

我想我必须用json将信息注入组件中。每个组件（库）必须单独集成 （如->

)

如果有人给我指路，我将非常感激

编辑（更多解释）：

{
  "top_offers": [
    {
      "id": 1,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_1.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_2.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_3.jpg"
        }
      ]
    },
    {
      "id": 2,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_4.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_5.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_6.jpg"
        }
      ]
    },
    {
      "id": 3,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_7.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_8.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_9.jpg"
        }
      ]
    }
  ]
}

 <div class="slider-slick-cardd">
           <div class='svelte' svelte-id='1'></div>
          </div>

import Houses  from './Houses.svelte';
Array.from(document.querySelectorAll('.svelte')).forEach((e,i) => {          
   new Houses({
    target: e 
});
});

你好。我使用web pack和gulp配置苗条。其想法是替换现有项目中的画廊

我的JSON文件：

{
  "top_offers": [
    {
      "id": 1,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_1.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_2.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_3.jpg"
        }
      ]
    },
    {
      "id": 2,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_4.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_5.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_6.jpg"
        }
      ]
    },
    {
      "id": 3,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_7.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_8.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_9.jpg"
        }
      ]
    }
  ]
}

 <div class="slider-slick-cardd">
           <div class='svelte' svelte-id='1'></div>
          </div>

import Houses  from './Houses.svelte';
Array.from(document.querySelectorAll('.svelte')).forEach((e,i) => {          
   new Houses({
    target: e 
});
});

我的组件（Houses.svelte）

这里假设它们应该被属性捕获。。 此解决方案无法按预期工作，因为foreach组件每次都会显示，并且在下面的附加图像中获得结果

所需结果必须是要成为行的库列（对于每个包装器svelte id=“1”（2,3..etc）属性

请有人帮忙：（

如果你用它来制作你的应用程序，你会看到

main.js

导出了一个名为

app

的东西。这是可以从Svelte外部下载到页面其余部分的代码

在

rollup.config.js

中有一个字段

output.name

（默认应用程序）这是从

main.js

导出的名称

通过这两个部分，我们可以轻松地将

main.js

更改为以下内容：

从“/App.svelte”导入应用程序；
导出默认功能（目标、道具）{
新应用程序({
目标,，
道具
})
};

我们现在拥有的是，insead除了立即安装我们的应用程序外，我们还有一个允许创建应用程序的功能

现在您的后端可以生成如下html输出：

app（document.getElementById（'A'），propsA）
app（document.getElementById（'B'），propsB）
app（document.getElementById（'C'），propsC）

它将以指定的div和给定的道具加载应用程序三次

现在，您当然也可以在后端渲染期间根据需要打印出这些道具，实际使用情况因平台而异（在您的案例中是Laravel）

只需注意，您必须确保已加载整个DOM（以便能够找到目标），并且已加载苗条包（出于明显的原因）

如果你用它来制作你的应用程序，你会看到

main.js

导出了一个名为

app

的东西。这是一段代码，可以从Svelte外部下载到页面的其余部分

在

rollup.config.js

中有一个字段

output.name

（默认应用程序）这是从

main.js

导出的名称

通过这两个部分，我们可以轻松地将

main.js

更改为以下内容：

从“/App.svelte”导入应用程序；
导出默认功能（目标、道具）{
新应用程序({
目标,，
道具
})
};

我们现在拥有的是，insead除了立即安装我们的应用程序外，我们还有一个允许创建应用程序的功能

现在您的后端可以生成如下html输出：

app（document.getElementById（'A'），propsA）
app（document.getElementById（'B'），propsB）
app（document.getElementById（'C'），propsC）

它将以指定的div和给定的道具加载应用程序三次

现在，您当然也可以在后端渲染期间根据需要打印出这些道具，实际使用情况因平台而异（在您的案例中是Laravel）

---

只需注意，您必须确保已加载整个DOM（以便能够找到目标）和已加载svelte捆绑包（出于明显的原因）

我猜您会想知道每个svelte组件中的

svelte id

，因此，您为每行创建一个svelte组件，并且只显示一个库

可以使用element.getAttribute（）获取属性

Array.from（document.querySelectorAll（'.svelte'））.forEach（（e，i）=>{
const svelteId=e.getAttribute（'svelte-id'）；
新房子({
目标：e，
道具：{
奥菲丽：苗条的
}
});
}

这样，您就可以在苗条的组件中处理这些问题：

从“/topOffers.js”导入{topOffers}”；
出口让利；
// ....
{#每个$topOffers[offerId]as gallery（gallery.imgs）}
{/每个}

我猜您可能想知道每个苗条组件中的苗条id，因此，您为每行创建一个苗条组件，并且只显示一个库

可以使用element.getAttribute（）获取属性

Array.from（document.querySelectorAll（'.svelte'））.forEach（（e，i）=>{
const svelteId=e.getAttribute（'svelte-id'）；
新房子({
目标：e，
道具：{
奥菲丽：苗条的
}
});
}

这样，您就可以在苗条的组件中处理这些问题：

从“/topOffers.js”导入{topOffers}”；
出口让利；
// ....
{#每个$topOffers[offerId]as gallery（gallery.imgs）}
{/每个}

非常感谢。我花了很长时间寻找解决方案。你是一个传奇！编辑：{{each$topOffers[offers]as gallery（gallery.imgs）}{/each}给了我一个错误：“Uncaught TypeError:无法读取create#u fragment处未定义的属性'length'”这就是为什么我要检查：{{each$topOffers as gallery}{if gallery.id==offerId}……再次感谢！不客气！非常感谢。我花了很长时间寻找解决方案。你是一个传奇！编辑：{#each$topOffers[offerId]as gallery（gallery.imgs）}{/each}给了我一个错误：“Uncaught TypeError:无法读取create#u fragment处未定义的属性‘length’”