如何将剃刀循环转换为 Vue.js 组件？

Question

我正在尝试采用一个非常愚蠢的 vue 组件并将更多代码（用 razor 编写）移动到组件本身（以使其尽可能模块化）。

目前该组件更像是一个容器，其中 razor 循环遍历社区列表并呈现一些 html 服务器端。然后将该 html 通过插槽传递到组件中并设置样式。

理想情况下，我想找到一种方法，通过 razor 仅渲染最低限度的内容，而是将尽可能多的逻辑移动到组件中。例如，我知道 vue 提供了一种循环数据的机制（v-for），但是在这种情况下，我不太确定如何以这样的方式将数据传递到组件中以利用它。

作为 vue 的新手（我想我们大多数人都是），我仍然掌握将服务器端数据传递给组件的窍门。我尝试过创建道具，但是生成的数据的复杂性让我有点失望。我希望这里有人能对解决这个问题的最佳方法有所了解！

提前致谢！

index.cshtml：

<community-list>
      @foreach (var region in regions)
      {
          var regPage = region.Pages.FirstOrDefault();
          if (regPage == null)
          {
              continue;
          }
          string isActive = "";
          int communityCount = 0;
          var cities = region.Children;
          for (int i = 0; i < cities.Count; i++) {
              communityCount += cities[i].Pages.Count;
          }
          if (HttpContext.Current.Request.IsAuthenticated && !Model.IsPreview) {
              var email = HttpContext.Current.User.Identity.Name;
              isActive = CompanyName.Core.Models.Users.IsRegionSubscribed(email, region.Name) ? "active" : "";
          }
        <div class="community container primary @isActive" data-name="@region.Name">
          <figure style="background-image: url('/assets/images/@regPage.GetAttributeValue("HeroImage")');"></figure>
          <h3>@regPage.GetAttributeValue("Title")</h3>
          <p>@(communityCount.ToString()) New Home Communities</p>
          <custom-button destination="@regPage.URL" appearance="primary" type="link" size="extra-large" text="Find New Homes in @stateName"></custom-button>
        </div>
      }
    </community-list>

CommunityList.vue

<template>
  <section class="community-list">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: 'CommunityList',
  };
</script>

<style lang="scss" scoped>
  -- styling here --
</style>

更新

-----

进一步澄清：

假设这是正确的方法，我想将剃刀循环中的 html 拉出插槽并将其放入组件中。完全删除该插槽，并从 razor 获取数据并使用从 razor 返回的值填充组件中的 html。

在我看来，我可以将更多的 html 和逻辑移入组件中越好。

可能是这样的：

index.cshtml：

@foreach (var region in regions) {
  var foo = region.foo;
  var bar = region.bar;
}
<community-list foo="@foo" bar="@bar"></community-list>

CommunityList.vue

<template>
  <section v-for="region in regions">
    <p>{{ foo }}</p>
    <p>{{ bar }}</p>
  </section>
</template>

我不太确定如何从以 vue 为中心的方式最好地解决这个问题。如果我将剃须刀转换为像上面一样简单地吐出要使用的变量列表，那么我将如何获取该数据，将其传递到组件中，并在 vue 组件本身中循环遍历它（类似于上面的示例）？在上述情况下，我确信这不会起作用 - 但我想一定有某种方法可以以某种方式完成我的想法？

（或者我只是以错误的方式接近这个？）

Answer 1

您必须将数据渲染到带有 razor 的标签中，渲染到全局变量中。设置 vue 组件时，使用该全局变量设置 data 函数。