vue 自己写组件。

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在网上看到很多大神都有写博客的习惯，坚持写博客不但可以为自己的平时的学习做好记录积累无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴！当然本人能力实在有限写出的文章可能和大神们不能比拟如果有什么不专业甚至是错误的地方还请大家指正！好了说了这么多那么下面进入正题^_^

在网上经常看到有朋友在问自己能不能写vue组件如果可以怎么应用到自己的项目之中呢！我觉得吧这个事儿就和用煮大米饭是一个道理的

1. 首先作大米饭我们得有米吧要不巧妇难为无米之炊啊因此先买好我们自己的大米也就是创建组件文件，这里我假设要创建一个自己loading效果组件那么我们就先创建 loading.vue 里面的代码根据vue template相关规则写就可以这里就不在赘述了我只写一个最最简单的例子

2.ok了米就这么愉快的买好了那么有了米我们现在只需要把他放在锅里！那么这个锅是谁呢！好吧我们自己来背这个锅，我们创建一个相关的.js文件通常组件都是一个功能自己一个文件夹那么每个组件都应该有自己独立的调用文件（一盆大米一个锅）那么为了统一我们可以都叫做index.js当然了这个名字你可以随便起只有以后你在后续调用时候更换相关名字即可！重点来了这个锅是怎么造的呢！话不多说直接上图

那么上面三个这么违和的框是干什么的么：红色框框：我靠这还用问吗你调用那个文件你得告诉人间啊这里当然要调用刚才我们自己创建的loading.vue文件。黄色框框：我靠这个黄色的框框可以说是本次本文章中重点中的重点为什么这么说呢我们要使用自己的组件就要导出这个组件而这个黄色框框中的代码就是导出自己组件的相应配置其中那个非常猥琐的浪线则是本例子的”命根子“ 这个命名就是你在其他文件中调用这个组件（这里是loading组件）的名字在这个例子中我们在调用组件时候就可以写成<Loading></Loading>。白色框框：这个没什么好说的相当于导出这个组件在main中好接受！

3.原材料大米也有了饭锅也有了现在是万事俱备只欠东风那我们第三部就是一个字”煮“ 两字：”开火“ 这里就是我们要把我们这个自己创建的组件应用到我们的页面之中详情请看下图