Vue创建自定义组件，并详解整个创建自定义组件的过程

在vue开发项目中想自定义一个自己的组件，于是在网上找一下教程，教程基本的都一样，但是都不是很详细，我就按照网上的教程从头到尾学习了一遍，文章中如果有不正确的，还请各位大佬指出，共同进步。

vue自定义组件前奏
学习 ES6中import xxx from xxx的用法，因为这个用法会在后面的自定义组件中用到。
Vue使用import … from …来导入组件，库，变量等。而from后的文件来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的：

这里的extensions指定了from后可导入的文件类型。而上面定义的这3类可导入文件，js和vue是可以省略后缀的，json后缀的文件不可省略后缀。

举个栗子：
import test from './test.vue’
等同于：
import test from './test’

若test.vue，test.js同时存在于同一个文件夹下，则import的导入优先级是：js>vue

import … from后的来源除了是文件，还可以是文件夹。例如图中的文件夹components,包含了一个HelloWorld.vue文件和一个test文件：

这时使用import test from './components’时，系统寻找文件的逻辑过程是：

if(package.json存在 && package.main字段存在 && package.main指定的js存在) {取package.main指定的js作为from的来源，即使该js可能格式或内容错误
} else if(index.js存在){取index.js作为from的来源
} else {取index.vue作为from的来源
}

因此若from后面的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；若不满足，则加载index.js；若不满足，则加载index.vue；这也是系统自动加载的默认顺序，同时这也是我们在后面自定义组件中为什么使用index.js来命名js文件的原因。
注意加载文件夹的形式，与上面省略后缀的形式是完全相同的。所以一个省略后缀的from来源，有可能是.vue .js，或者是文件夹。
例如以上components文件夹内的引入顺序是：

首先查看文件夹下是否有package.json，本文件夹中不存在；
下一步查看文件夹下是否有index.js文件是否存在，本文件夹中不存在；
下一步在components同一级目录下，存在HelloWorld.vue，没有同名js，所以可以判断出这个是加载的vue文件，即：

export { default as HelloWorld } from './HelloWorld.vue'

在下一步test只有一个文件夹，所以是加载的文件夹。打开test文件夹：

优先找package.json。不存在。
然后找index.js，存在。
于是：

export { default as test } from './test'

这样，就通过加载一个文件夹，获得了2个vue组件(test和HelloWorld)。

vue自定义创建一个组件
首先在components文件夹中创建一个test文件夹，test文件夹中创建index.js和test.vue两个文件，用来创建我们的第一个自定义组件。

其中test.vue文件的内容如下：

<template><div><p>实现自定义组件---pon</p></div>
</template>
<script>
export default {data(){return {msg: "hello pon"}}
}
</script><style lang=""></style>

index.js文件内容如下：

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

在这个步骤的时候，我有一个想不明白的地方，就是为什么很多人都要创建index.js文件，直接引入test.vue文件不行吗，答案是可以的。但是为了后面能够对test目录进行资源整合（如test文件夹中又包含许多子组件，我们也想要在全局调用这些子组件，那么我们就可以在index.js文件中把我们需要导出的组件都在index.js文件中合并导出多个组件，让你写的多个组件可以在main.js或者其它位置能够通过index.js统一引入）；还有一个作用就是用了index.js，可以将使用组件注册机制，在vue中注册为全局组件，方便在其他地方直接调用（例如本文index.js中使用了install方法），后面再main.js中引入组件，然后使用Vue.use(组件名)，这样你就可以在全局中使用这个自定义组件了！！！是不是明白了，我现在就是理解到这个程度，如何还有别的优点还请大佬评论指出。

在创建问组件文件后，我们就可以在main.js中全局引入我们自定义的组件了，main.js引入方式如下：

全局引入我们的tetspon自定义组件后，我们可以在HelloWorld.vue组件中调用这个组件测试一下啦！
（只需调用即可，不用在HelloWorld.vue中再引入这个组件，因为我们已经在main.js文件中全局引入）

打开网页之后就可以看到，我们自定义的组件已经正确的在HelloWorld.vue组件中显示出来了！！！

Vue创建自定义组件，并详解整个创建自定义组件的过程相关推荐

外部如调用layui中的组件_详解layui.layer独立组件
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力. 目前,lay ...
服务器创建和附加虚拟磁盘,详解Hyper-V创建虚拟磁盘存储配置攻略
在Hper-V中,我们可以轻松的创建虚拟磁盘和存储,磁盘以 .vhd 文件的形式进行存储,若要创建新的虚拟硬盘,可以使用新建虚拟硬盘向导或新建虚拟机向导.如果正在创建动态扩充磁盘,则新建虚拟机向导可以 ...
vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
Vue组件-Confirm详解
Vue组件-Confirm详解原作者:爱扎马尾的小狮子一.使用的地方引用,传入属性和方法在需要的地方引入组件,然后传入对应的属性和方法组件 <template> <div : ...
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
数据列表多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...
ueditor上传组件显示乱码_最全面的移动端 UI组件设计详解：中篇
上一期给大家讲解了<最全面的移动端UI组件设计详解:上篇>,主要分享了:布局组件和导航组件2个部分:这次给大家带来:基础组件.表单组件和反馈组件详解,希望你在设计APP.小程序.H5页面中 ...
lhgdialog弹出框组件参数详解(自己曾经开发的fuzz项目中用到过)
lhgdialog弹出框组件参数详解鸣谢:http://blog.csdn.net/hurryjiang/article/details/7657623 同文:http://wjch-111.it ...

Vue创建自定义组件，并详解整个创建自定义组件的过程

Vue创建自定义组件，并详解整个创建自定义组件的过程相关推荐

最新文章

热门文章