Vue元件（35）動態元件 component 的 is 到底可以是啥？

金色海洋（jyk）發表於2021-04-01
Vue元件

component 動態元件

Vue官網上提供了一個動態元件 <component :is="currentTabComponent"> ，那麼這裡的 is 到底是什麼呢？
官網介紹的太分散了，這裡儘量全面的列舉出來。如果有遺漏歡迎補充。

  • 原生HTML
<component is="input" placeholder="原生HTML" value='123'></component>
<component is="div">這是div</component>

input、select 這些 HTML 自帶的都是可以的，div這些也可以。

  • 全域性元件
<component is="el-input" placeholder="UI庫的文字框" style="width: 200px;" v-model='value'></component>

最常見的全域性元件，就是各種UI庫了，他們會用外掛的方式被註冊成為全域性元件，所以我們可以直接使用el-input這類的標籤。

  • 區域性元件
<component is="test" str="區域性註冊的元件" ></component>

需要先在 元件的 components: { test } 部分註冊元件，然後就可以用了。

  • 非同步元件
<component 
    :is="defineAsyncComponent(()=>import('./components/test'))"
    str="區域性註冊的元件"
  ></component>

這種方式就不需要在元件的 components 裡面註冊了，可以直接使用。可以實現真按需載入。

如何動態？

看了上面的例子你可能會奇怪，直接使用標籤不香嗎？幹嘛非要用這個動態元件？
動態元件有幾個好處：

  • 動態載入、動態改變元件型別，比如官網裡的例子， 改變tab就改變了元件。

  • 遍歷

<template v-for="key in [101, 102, 103, 104]" :key="key">
  <component :is="dict[key]"></component>
</template>

     const dict = {
        101: 'input',
        102: 'el-input',
        103: 'test',
        104: defineAsyncComponent( () =>
            import('./components/test')
          )
      }

這個是我最喜歡的一種用法，封裝表單控制元件（的子控制元件）就非常方便了。
另外還可以實現表單的自定義子控制元件，比如加一個 105：你自己寫的一個元件，這樣就可以擴充套件子控制元件了。

屬性怎麼辦？

不同型別的元件，需要的屬性也是不一樣的，那麼遍歷的時候如何給元件的屬性賦值？

這個可以使用 v-bind="{}" 的方式來實現，把需要的屬性做成一個物件就好。

事件還沒想好，目前只能是統一事件。
插槽也可以支援，只是需要做一下判斷。

非同步元件 defineAsyncComponent

  • 載入 xx.vue 檔案：
defineAsyncComponent( () =>
  import('./components/test.vue')
)

我懷疑 VueRouter 就是用 defineAsyncComponent 來實現 非同步路由的。

  • 載入 xx.js 檔案：
defineAsyncComponent( () =>
  import('./components/test.js  ')
)

js檔案的內容可以是這樣的。

test.js

export default {
  name: 'component-test',
  template: `
    <div>
      <br>
      這是 元件測試<br>
      父元件傳遞引數：{{str}}<br>
      setup 獲取引數：{{str1}}<br>
    </div>
  `,
  props: {
    str: String
  },
  setup(props) {
    // 在setup裡面獲取引數值
    let str1 = Vue.ref(props.str)
    str1.value += '--內部改一下。'

    return {
      str1
    }
  }
}

我的線上演示用的都是這種方式，用來做演示還是很方便的。

  • template
    模板，設定HTML部分。

其他的地方和 .vue 檔案是一樣的，當然css除外，還沒想出了怎麼解決css 的問題，因為不會。。。

動態元件的演示

相關文章