component 动态组件
Vue官网上提供了一个动态组件
官网介绍的太分散了，这里尽量全面的列举出来。如果有遗漏欢迎补充。
- 原生HTML
这是div
input、select 这些 HTML 自带的都是可以的，div这些也可以。
- 全局组件
最常见的全局组件，就是各种UI库了，他们会用插件的方式被注册成为全局组件，所以我们可以直接使用el-input这类的标签。
- 局部组件
需要先在 组件的 components: { test } 部分注册组件，然后就可以用了。
- 异步组件
这种方式就不需要在组件的 components 里面注册了，可以直接使用。可以实现真按需加载。
如何动态？
看了上面的例子你可能会奇怪，直接使用标签不香吗？干嘛非要用这个动态组件？
动态组件有几个好处：
动态加载、动态改变组件类型，比如官网里的例子， 改变tab就改变了组件。
遍历
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: `
这是 组件测试
父组件传递参数：{{str}}
setup 获取参数：{{str1}}
`,
props: {
str: String
},
setup(props) {
// 在setup里面获取参数值
let str1 = Vue.ref(props.str)
str1.value += '--内部改一下。'
return {
str1
}
}
}
我的在线演示用的都是这种方式，用来做演示还是很方便的。
- template
模板，设置HTML部分。
其他的地方和 .vue 文件是一样的，当然css除外，还没想出了怎么解决css 的问题，因为不会。。。
动态组件的演示