vue创建自定义组件过程，仿element-ui按钮

最新推荐文章于 2024-06-18 23:15:23 发布

且听风呤dzq

最新推荐文章于 2024-06-18 23:15:23 发布

阅读量1.3k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_47122636/article/details/120577507

版权

本文详述了在Vue中创建自定义组件的过程，从文件导入、组件注册到编写组件内容。通过一个仿Element UI按钮的例子，解释了如何在index.js中整合资源并注册全局组件，以及在but.vue中利用props和插槽实现组件间的数据传递和内容定制。在main.js中导入并使用组件，遵循Vue的默认加载顺序。在实际应用中，这样的自定义组件可提高代码复用性和项目组织效率。

摘要由CSDN通过智能技术生成

vue创建自定义组件

前言

创建自定义组件要先了解文件导入和组件注册。

一、文件导入和组件注册

Vue使用import … from …来导入组件，库，变量等。而from后的文件来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的，其中js和vue是可以省略后缀的，json后缀的文件不可省略后缀。

我们在文件夹src/components下创建index.js 和but.vue
在这里插入图片描述

编写index.js内容：

import testComponent from './but.vue'
const testpon = {
   
  install (Vue) {
   
    Vue.component('testpon', testComponent)
  }
}
export default testpon

思考：我们为什么要创建index.js文件，直接引入but.vue文件不行吗，答案是可以的。但是为了后面能够对test目录进行资源整合（如components文件夹中包含许多子组件，我们也想要在全局调用这些子组件，那么我们就可以在index.js文件中把我们需要导出的组件都在index.js文件中合并导出多个组件，让你写的多个组件可以在main.js或者其它位置能够通过index.js统一引入）；还有一个作用就是用了index.js，可以将使用组件注册机制，在vue中注册为全局组件，方便在其他地方直接调用（例如本文index.js中使用了install方法），后面再main.js中引入组件，然后使用Vue.use(组件名)注册，这样你就可以在全局中使用这个自定义组件了。

注册组件：

我们在main.js中导入文件夹注册组件