Question

我试图采用非常愚蠢的vue组件并将更多代码（用剃刀编写）移动到组件本身（以尽可能保持模块化）。

目前，该组件更像是一个容器，其中razor循环遍历社区列表并呈现出一些html服务器端。然后，html通过一个插槽进入组件并进行样式化。

理想情况下，我想找到一种通过剃刀只渲染最小值的方法，而是将尽可能多的逻辑移动到组件中。例如，我知道vue提供了一种循环数据的机制（v-for），但是在这种情况下，我不太确定如何将数据传递到组件中以便利用它。 / p>

对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>

更新

------

进一步澄清：

假设它是正确的方法，我想将razor循环中的html拉出插槽并将其放入组件中。完全删除插槽，从剃刀中获取数据，并使用从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函数。

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

1 个答案: