教程 框架 组件 接口 工具 其他

动态组件

通过本节,你将学会如何使用动态组件,减少模板的代码量

绝大数情况下推荐在模板上使用if等指令进行逻辑判断,改变视图结构。

示例如下:

<import src="./part1.ux" name="part1"></import>
<import src="./part2.ux" name="part2"></import>
<import src="./part3.ux" name="part3"></import>
<template>
  <div>
    <part1 if="{{status === 1}}"></part1>
    <part2 elif="{{status === 2}}"></part2>
    <part3 else></part3>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: 1
      }
    }
  }
</script>

这种情况下,我们可以通过修改status的值达到控制指定组件渲染的目的。

然而一旦引入的组件过多,就需要在模板引入大量代码,导致项目的可维护性变差。

示例如下:


<import src="./part1.ux" name="part1"></import>
<import src="./part2.ux" name="part2"></import>
<import src="./part3.ux" name="part3"></import>
<import src="./part4.ux" name="part4"></import>
<import src="./part5.ux" name="part5"></import>
<import src="./part6.ux" name="part6"></import>

<template>
  <div>
    <part1 if="{{status === 1}}"></part1>
    <part2 if="{{status === 2}}"></part2>
    <part3 if="{{status === 3}}"></part3>
    <part4 if="{{status === 4}}"></part4>
    <part5 if="{{status === 5}}"></part5>
    <part6 if="{{status === 6}}"></part6>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: 1
      }
    }
  }
</script>

这种情况下引入动态组件就能有效地减少代码量。

示例如下:

<import src="./part1.ux" name="part1"></import>
<import src="./part2.ux" name="part2"></import>
<import src="./part3.ux" name="part3"></import>
<import src="./part4.ux" name="part4"></import>
<import src="./part5.ux" name="part5"></import>
<import src="./part6.ux" name="part6"></import>

<template>
  <div>
    <component is="{{'part' + status}}"></component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: 1
      }
    }
  }
</script>

is的值表示组件名,通过修改status的值即可达到动态修改组件的目的。

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容