小程序条件渲染自定义组件失败？

Question

问题描述

在一个page下面自定义了多个组件（模块）

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

//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'>产业情况</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中的某个分类，能实现下面的模块切换

现在我找到了一种方法，发现之前的实现方式是错误的（我把组件和模板的功能搞混了，或者说并没有明白小程序中二者的区别），现在我用的模板方法：

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

...

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

</view>
就实现了该功能

Answer 1

就是这样搞得没问题