通过学习elementui编写自定义的vue组件

1:先来回顾一下vue组件的局部注册与全局注册

通过学习elementui编写自定义的vue组件_第1张图片
image

然后在另外一个组件HelloWorld.vue内进行局部注册;

通过学习elementui编写自定义的vue组件_第2张图片
image

我们也可以再main.js里进行全局注册;

通过学习elementui编写自定义的vue组件_第3张图片
image

2 : 使用Vue.use()

我们在开发过程中遇到大量需要反复使用的组件时都会进行全局注册,那么如何elementui一样Vue.use()来注册组件,请回顾 文档 对插件的扩展 或者戳 这里

我们建立一个文件夹存放组件,写一个aler组件

通过学习elementui编写自定义的vue组件_第4张图片
image

然后在 index.js里配置下这个组件的install

通过学习elementui编写自定义的vue组件_第5张图片
image

这样的话就可以在main.js 里面

import zkxAlert from '../componentLib/alert '

Vue.use(zkxAlert)

如何像elementui 一样 use(elementui) 就可以使用全部组件

通过学习elementui编写自定义的vue组件_第6张图片
image

在componentLib/index.js 内如上处理

3:使用 prop, 事件, slot 让组件变得灵活;






下面我们use组件之后,调用看下


    
    周末愉快
通过学习elementui编写自定义的vue组件_第7张图片
image

你可能感兴趣的:(通过学习elementui编写自定义的vue组件)