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

前言 :

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

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

 

正文:

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

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

 

 

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

 

 

3.样式(仅供参考)

 

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

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

 

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

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