component

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。详见

平台差异说明

H5	微信小程序	抖音小程序	小红书小程序	快手小程序
√	x	x	x	x

template

qinjs 支持在 template 模板中嵌套 <template/> 和 <block/> ，用来进行 列表渲染 和 条件渲染。

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/> 。

平台差异说明

H5	微信小程序	抖音小程序	小红书小程序	快手小程序
√	√	√	√	√

代码示例

Vue

<template>
  <view>
    <template v-if="test">
      <view>test 为 true 时显示</view>
    </template>
    <template v-else>
      <view>test 为 false 时显示</view>
    </template>
  </view>
</template>

<template>
  <view>
    <template v-if="test">
      <view>test 为 true 时显示</view>
    </template>
    <template v-else>
      <view>test 为 false 时显示</view>
    </template>
  </view>
</template>

Script

<script>
  export default {
    data() {
      return {
        test:true,
      };
    },
  };
</script>

<script>
  export default {
    data() {
      return {
        test:true,
      };
    },
  };
</script>

Vue

<template>
  <view>
    <block v-for="(item,index) in list" :key="index">
      <view>{{item}} - {{index}}</view>
    </block>
  </view>
</template>

<template>
  <view>
    <block v-for="(item,index) in list" :key="index">
      <view>{{item}} - {{index}}</view>
    </block>
  </view>
</template>

transition

<transition> 元素作为单个元素/组件的过渡效果。 <transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。详见

平台差异说明

H5	微信小程序	抖音小程序	小红书小程序	快手小程序
√	x	x	x	x

transition-group

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span> ，可以通过 tag attribute 配置哪个元素应该被渲染。详见

平台差异说明

H5	微信小程序	抖音小程序	小红书小程序	快手小程序
√	x	x	x	x

keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。详见

平台差异说明

H5	微信小程序	抖音小程序	小红书小程序	快手小程序
√	x	x	x	x

slot

<slot> 元素作为组件模板之中的内容分发插槽。 <slot> 元素自身将被替换。插槽。

详细用法，请参考下面教程的链接。通过插槽分发内容

平台差异说明

H5	微信小程序	抖音小程序	小红书小程序	快手小程序
√	√	√	√	√