为什么在父母到不在vuejs工作的孩子之间传递的数据

Question

在这里，我使用JavaScript变量中的一些数据列表将传递给Vuejs模板循环。

我的JavaScript变量，

var templates = {
                  0:{ 
                      'nb':1,
                      'column':2
                     },
                  1:{ 
                      'nb':1,
                      'column':2
                     }
              }

我的父模板是

   <div v-for="(te,index) in templates" class="row">
      <campaign_segment :t_nb="te.nb" :t_column=te.column>   </campaign_segment>
   </div>

父模板的来源，

<template v-if="showTemplate" id="segment_body">
        <b>@{{ t_nb }}</b>
        <div v-for="a in t_nb">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>
</template>

儿童模板的来源，

    <template id="campaignBlock">
      <b>HIT</b>
    </template>

我的vuejs，

  // For Parent Template
  Vue.component(
   'campaign_segment', {
   template: '#segment_body',
   props: ['t_nb', 't_column']
 });

// For Child Template
Vue.component('block', {
     template: '#campaignBlock'
});

通常，

       <div v-for="a in t_nb">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>

没有生成循环。

在这里，如果我使用，

        <div v-for="a in 2">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>

循环工作正常。

这是怎么回事，为什么Vuejs永远不会使用相同的实例来处理循环？

Answer 1

我看到的是，可以有两个issees：

1. 在模板下有多个组件，因此您可以将所有组件放入单个div中，如在此处解决的。
2. 在v-for中使用parseInt，因为它可以用作道具而不是整数中的字符串传递，您也可以将数据类型放在此处所述。

html

<template>
   <div v-if="showTemplate" id="segment_body">
        <b>@{{ t_nb }}</b>
        <div v-for="a in parseInt(t_nb)">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>
  </div>
</template>