快應(yīng)用 動態(tài)組件

通過本節(jié)，你將學(xué)會如何使用動態(tài)組件，減少模板的代碼量

絕大數(shù)情況下推薦在模板上使用?if?等指令進(jìn)行邏輯判斷，改變視圖結(jié)構(gòu)。

示例如下：

<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?的值達(dá)到控制指定組件渲染的目的。

然而一旦引入的組件過多，就需要在模板引入大量代碼，導(dǎo)致項目的可維護(hù)性變差。

示例如下：

<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>

這種情況下引入動態(tài)組件就能有效地減少代碼量。

示例如下：

<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?的值即可達(dá)到動態(tài)修改組件的目的。