# component 動態元件 Vue官網上提供了一個動態元件 <component :is="currentTabComponent"> ，那麼這裡的 is 到底是什麼呢？ 官網介紹的太分散了，這裡儘量全面的列舉出來。如果有遺漏歡迎補充。 * 原生HTML ```html 這是div ``` input、select 這些 HTML 自帶的都是可以的，div這些也可以。 * 全域性元件 ```html ``` 最常見的全域性元件，就是各種UI庫了，他們會用外掛的方式被註冊成為全域性元件，所以我們可以直接使用el-input這類的標籤。 * 區域性元件 ```html ``` 需要先在 元件的 ```components: { test }``` 部分註冊元件，然後就可以用了。 * 非同步元件 ```html ``` 這種方式就不需要在元件的 components 裡面註冊了，可以直接使用。可以實現真按需載入。 # 如何動態？ 看了上面的例子你可能會奇怪，直接使用標籤不香嗎？幹嘛非要用這個動態元件？ 動態元件有幾個好處： * 動態載入、動態改變元件型別，比如官網裡的例子， 改變tab就改變了元件。 * 遍歷 ```js ``` ```js const dict = { 101: 'input', 102: 'el-input', 103: 'test', 104: defineAsyncComponent( () => import('./components/test') ) } ``` 這個是我最喜歡的一種用法，封裝表單控制元件（的子控制元件）就非常方便了。 另外還可以實現表單的自定義子控制元件，比如加一個 ```105：你自己寫的一個元件```，這樣就可以擴充套件子控制元件了。 # 屬性怎麼辦？ 不同型別的元件，需要的屬性也是不一樣的，那麼遍歷的時候如何給元件的屬性賦值？ 這個可以使用 ```v-bind="{}"``` 的方式來實現，把需要的屬性做成一個物件就好。 事件還沒想好，目前只能是統一事件。 插槽也可以支援，只是需要做一下判斷。 # 非同步元件 defineAsyncComponent * 載入 xx.vue 檔案： ```js defineAsyncComponent( () => import('./components/test.vue') ) ``` 我懷疑 VueRouter 就是用 defineAsyncComponent 來實現 非同步路由的。 * 載入 xx.js 檔案： ```js defineAsyncComponent( () => import('./components/test.js ') ) ``` js檔案的內容可以是這樣的。 test.js ```js export default { name: 'component-test', template: `
這是 元件測試
父元件傳遞引數：{{str}}
setup 獲取引數：{{str1}}
`, props: { str: String }, setup(props) { // 在setup裡面獲取引數值 let str1 = Vue.ref(props.str) str1.value += '--內部改一下。' return { str1 } } } ``` 我的線上演示用的都是這種方式，用來做演示還是很方便的。 * template 模板，設定HTML部分。 其他的地方和 .vue 檔案是一樣的，當然css除外，還沒想出了怎麼解決css 的問題，因為不會。。。 ![動態元件的演示](https://upload-images.jianshu.io/upload_images/25078225-c0bbdf62d9176176.png?imageMogr2/auto-orient/strip%7CimageView2/2/