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

我试图带一个非常哑的vue组件，并将更多的代码（用剃刀写入）移动到组件本身（尽可能保持模块化）。如何将剃须刀循环转换为Vue.js组件？

当前组件更多的是一个容器，其中剃刀循环遍历社区列表并渲染出一些html服务器端。该html然后通过一个插槽传入组件并进行了样式化。

理想情况下，我想找到一种方法，只通过剃刀渲染最小值，然后将尽可能多的逻辑移入组件。例如，我知道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拉出插槽并将其放入组件中。完全删除插槽，并从剃须刀中获取数据，并使用剃刀返回的值填充组件中的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组件本身内循环（如上例所示）？在上面的例子中，我确信这是行不通的 - 但我想我必须有某种方式来完成我在想什么？

（还是我处理这个错误的方式完全？）

来源

2017-07-03 David Vasquez

你将不得不将数据呈现到剃刀标签，成为一个全局变量。当您设置您的vue组件时，请使用该全局变量来设置data函数。

来源

2017-07-03 20:05:25 blockhead

也许我不太了解如何用组件的vue循环钩入剃须刀的循环。我不太清楚如何最好地从vue中心的方式来解决这个问题。如果我将剃须刀转换为简单地吐出要使用的变量列表，例如： @foreach（var region in regions）{var foo = region.foo; var bar = region.bar;然后，我将如何获取该数据，将其传递到组件中，并在vue组件本身内循环使用它？（本质上，我想将所有的html移出插槽到组件中，并用剃须刀循环中的数据填充html中的值。） –

而不是这样做，将其输出为json，然后当您创建主Vue组件： 'new Vue（{data：myDataInJsonForm，....}）' – blockhead

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

回答

相关问题