小程序怎么动态使用组件,类似VUE component

  1. 需求,我现在首页应用了两个自定义组件, ,分别用来展示首页主页面和点击分类后,数据列表页面。
    在这里插入图片描述
    在这里插入图片描述
  2. 方案
    在vue中可以直接使用component,is来控制使用哪个组件
<component class="tab-page-content" :is="item.isHome ? 'HomeData' : 'DataList'" :params="{[item.paramsName]: item.pk_id}"></component>

小程序中不能直接使用,但是通过查看文档,发现小程序的模板属性与上述功能类似,于是经过处理,可以这么动态使用组件:
在json文件中引入组件

"data-list": "./data-list/index",
"home-data": "./home-data/index"
//用模板属性封装组件
<!--主页视图-->
<template name="HomeData">
  <home-data></home-data>
</template>
<!--分类视图-->
<template name="DataList">
  <data-list></data-list>
</template>
//使用
<template is="{
    
    {item.isHome ? 'HomeData' : 'DataList'}}"></template>

猜你喜欢

转载自blog.csdn.net/qq_40026668/article/details/105832140