0%

[Vue] Vue 元件 - 動態切換元件

發表於 分類於 Disqus：

使用 is 屬性可以在保留語意化的 HTML 標籤的同時，也達成與元件標籤一樣的效果，更有用的是，使用 v-bind:is 可以動態切換不同的元件。

使用 is 顯示單一元件

1
2
3
4
5
6
// HTML
<!--以下兩種寫法效果一樣-->
// 使用元件標籤
<primary-component :data="item"></primary-component>
// 使用 is 屬性
<div is="primary-component" :data="item"></div>

使用 is 動態切換元件

以套用 Bootstrap 的頁籤為例，點擊頁籤可以在兩個頁面之間切換（頁面由元件 primary-component 及 danger-component 製作）。

頁籤對應的頁面區塊，可以不需要使用「插入元件 + v-if」來切換頁面。

取而代之的是：使用一個 <div> + v-bind:is + 控制當前頁籤的變數（current）+ 頁面資料內容（:data="item"）來達成動態切換的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// HTML
<ul class="nav nav-pills">
  <!-- 用 @click 切換 current 的值 -->
  <li class="nav-item">
    <a class="nav-link"
       :class="{'active': current == 'primary-component'}"
       href="#" @click.prevent="current = 'primary-component'">
       藍綠色元件
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       :class="{'active': current == 'danger-component'}"
       href="#" @click.prevent="current = 'danger-component'">
       紅色元件
    </a>
  </li>
</ul>
<div class="mt-3">
  <!-- 動態切換元件 -->
  <div :is="current" :data="item"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 省略元件及模板的程式碼

// Vue 根實例
var app = new Vue({
  el: '#app',
  data: {
    item: {
      header: '這裡是 header',
      title: '這裡是 title',
      text: '...'
    },
    current: 'primary-component'  // 當前頁籤
  }
});