您的位置:首页 > Web前端 > Vue.js

Vue组件(35)动态组件 component 的 is 到底可以是啥?

2021-04-01 18:56 68 查看 https://www.cnblogs.com/jyk/p/

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 的问题,因为不会。。。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: