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 的問題，因為不會。。。
