在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组件中显示出来了!!!