vue的component

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_24044863/article/details/100539701

vue中的component标签,实现组件的动态切换,通过(:is)实现。:is绑定一个名称,通过这个名称调用不同的组件。

我用到的是item.name,即我规定的每个组件的name,通过name的匹配,调用相应的组件。
第一,我大概介绍一下背景。我建的一个router中的一项模块,其对应的views中的文件名是SystemManage。(说明一下,views中对应的每个文件,是实现router中的对应的每一个模块的)。该SystemManage中,有config.js和index.vue两个文件,config.js中,有一些const的一些常量,然后通过一个总的export const option = {…}。其中,有一个常量的申明中const hunter = {…}的conditions: […]中,如图中在这里插入图片描述
name现在比如有两个,一个是上面图中的‘wrap-select’,还有一个是在这里插入图片描述
即,name有‘wrap-select’和‘wrap-checkbox’,

第二,我在在这里插入图片描述,components中,定义我的组件,在这里插入图片描述 and 在这里插入图片描述,每个.vue文件中,都已经写好了我所需要展示的形式,后面调用的时候我再传值。
当然,components --> 的index.vue中,有export,例如其中一个在这里插入图片描述
第三,在我的SystemManage中的index.vue中,首先必须的import { WrapSelect, WrapCheckbox} from ‘@/components’,和export default 中的组件定义,components: {WrapSelect, WrapCheckbox}

第四,差点忘了给大家说WrapSelect和WrapCheckbox中的name的定义了,截图:在这里插入图片描述在这里插入图片描述
可以,注意到,这里的name和我在第一步中的config.js中的name是一样的,没错,我的:is就是通过这个name调不同的组件的,

最后,就是关键的,<component …>
<component v-if=“item.name” :style=“item.key===‘type’?‘width: 100px’:’’” :is=“item.name” v-model=“parabole[item.key]” v-bind=“item” @handle=“handleMethod”>

这里贴一个别人的简单的例子:
https://blog.csdn.net/qq_30758077/article/details/83069715

猜你喜欢

转载自blog.csdn.net/qq_24044863/article/details/100539701
今日推荐