发布时间:2022-08-11 文章分类:编程知识 投稿人:李佳 字号: 默认 | | 超大 打印

前言 :

组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。

现在基于vue的UI组件库有很多,比如iview,element-ui等。但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件。

正文:

今天做一个类似于element-Container的(自由度高,可大量复用)全局组件,直接上步骤:

1.在src目录下新建components文件夹,结构如下:

vue自定义组件-实现一个Container全局组件步骤(给还不会使用组件的新手一个思路,大佬绕道)

2. `mh-box/index.vue ` 文件中写组件结构,把该挖的坑挖好(这里我们定义了`标题` / `图标按钮` / `if条件式` ),位置使用slot

vue自定义组件-实现一个Container全局组件步骤(给还不会使用组件的新手一个思路,大佬绕道)

3.样式(仅供参考)

vue自定义组件-实现一个Container全局组件步骤(给还不会使用组件的新手一个思路,大佬绕道)

4.在外层index.js中对我们的组件进行处理(四步)

  (1).导入; (2).存到数组中;3.定义install方法;(4).导出

vue自定义组件-实现一个Container全局组件步骤(给还不会使用组件的新手一个思路,大佬绕道)

5.在main.js中导入并使用

vue自定义组件-实现一个Container全局组件步骤(给还不会使用组件的新手一个思路,大佬绕道)

现在自定义组件 `<mh-box>` 就可以全局使用了,看下效果

vue自定义组件-实现一个Container全局组件步骤(给还不会使用组件的新手一个思路,大佬绕道)