Vue组件(35)动态组件 component 的 is 到底可以是啥?
2021-04-01 18:56
1121 查看
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这类的标签。
- 局部组件
< 1044 code class="language-html"><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 的问题,因为不会。。。
相关文章推荐
- vue19 组建 Vue.extend component、组件模版、动态组件
- Vue中的动态组件(v-bind:is)的使用及组件传值
- 加上 "is":动态组件用法(可以切换多个模板的组件)
- vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
- 详解vue组件的is特性:限制元素&动态组件
- 用Vue开发动态刷新Echarts组件
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
- Vue拖拽组件列表实现动态页面配置
- vue动态组件和slot插槽
- (简)vue的component(组件)
- Vue的父组件到底是啥?
- 发布一个类似Subsonic语法的动态生成SQL语句,并可以返回相应实体类的一个组件
- vue 循环加载动态组件以及传值
- (精华)2020年7月12日 vue 组件component的使用
- vue.js父子组件通信动态绑定
- Vue的slot transition 动态组件 过滤器
- 项目实战之vue爬坑之路:vue框架中如何注册全局公共过滤器filter、全局公共插件、全局公共组件component
- vue 动态加载tab选项卡组件
- vue 动态组件组件复用_动态表的Vue组件
- vue 异步加载全局组件 Vue.component(String, Object)