小程序條件渲染自定義組件失敗？

問題描述

在一個page下面自定義了多個組件（模塊）

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

相關代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

//wxml
<scroll-view class='run_are' scroll-x="true">
    <view class='nav_item {{Index==0?"sel":""}}' data-i="0" bindtap='c_index'>基本情況</view>
    <view class='nav_item {{Index==1?"sel":""}}' data-i="1" bindtap='c_index'>住房情況</view>
    <view class='nav_item {{Index==2?"sel":""}}' data-i="2" bindtap='c_index'>人口情況</view>
    <view class='nav_item {{Index==3?"sel":""}}' data-i="3" bindtap='c_index'>產業(yè)情況</view>
    <view class='nav_item {{Index==4?"sel":""}}' data-i="4" bindtap='c_index'>幫扶措施</view>
  </scroll-view>
<view>
  <!--默認模塊-->
  <view wx:if="{{Index==0}}">
    <default>
      
    </default>
  </view>
  <!--模塊1-->
  <view wx:if="{{Index==1}}">
    <theOne>
      
    </theOne>
  </view>
</view>

//JSON
{
  "usingComponents": {
    "basic": "../../../components/basic/basic",
    "hose": "../../../components/hose/hose"
  }
}

//js
c_index: function (event){
    var i = event.currentTarget.dataset.i;
    console.log(i);
    if (this.data.Index!=i){
      this.setData({
        Index: i,
      });
    }
    console.log(this.data.Index);
  }

你期待的結果是什么？實際看到的錯誤信息又是什么？

點擊scroll-view中的某個分類，能實現(xiàn)下面的模塊切換

現(xiàn)在我找到了一種方法，發(fā)現(xiàn)之前的實現(xiàn)方式是錯誤的（我把組件和模板的功能搞混了，或者說并沒有明白小程序中二者的區(qū)別），現(xiàn)在我用的模板方法：

然后在展示頁面引入了模板頁面
<import src="../../../template/template/template.wxml"/>

...

<view>
<!--默認模塊-->
<template is="{{temp_name}}"></template>
<!--模塊1-->

</view>
就實現(xiàn)了該功能