vue自定义组件（超详细）

一、局部引入

步骤

1、先将组件写好，放在一个文件中
组件的写法和正常的.vue文件相同，如果需要接收参数，可使用props传值，以封装一个标题组件举例。

以下为项目目录

以下为组件内容

<template><div class="title-small"><ul class="al-cen"><li class="icon"></li><li class="text left-10">{{ content }}</li></ul></div>
</template><script>
export default {name: "",data() {return {};},props: {content: "",//接收参数},components: {},created() {},mounted() {},methods: {},
};
</script>
<style lang="scss" scoped>
.title-small {background-color: rgb(231, 231, 231);padding: 8px 16px;width: 500px;border-radius: 2px;.icon {width: 16px;height: 16px;border-radius: 8px;border: 2px solid rgb(19, 180, 230);}.text {font-size: 16px;}
}
</style>

2、局部引入组件并使用
局部引入可在需要引入的项目中单独引入

import titleSmall from "./form/titleSmall.vue";
components: {titleSmall},

以下为完整代码

<template><div>//直接使用注册的标签即可，content内容为传给组件的值<titleSmall class="top-30" content="标题"></titleSmall></div>
</template><script>
import titleSmall from "./form/titleSmall.vue";//引入组件
import "../style/form.scss";
export default {name: "",data() {return {content: "",bat: "",};},components: {titleSmall},//注册组件created() {},mounted() {},methods: {},
};
</script>
<style lang="scss" scoped>
</style>

至此组件已局部引入并正常使用

二、全局引入

全局引入方法和局部引入类似，组件的写法与局部引入完全一样，仅仅是引入方式有所区别
1、写组件
方法同上
2、引入组件
局部引入组件是在需要使用组件的文件中单独引入，这种方法很常见，在日常使用中大多都是采用局部引入。
但对于某些使用很频繁的组件，如标题这样的可能会所有文件都会使用的组件，这样在每个文件都引入显得很是繁琐，且万一遇到需求改变，修改起来也是异常麻烦，所以全局引入在此时就显得很有必要了。
全局引入的方法也很简单，仅仅是从单文件引入改为在main.js文件中引入即可

import titleSmall from './views/form/titleSmall.vue';//引入组件
Vue.component('title-small',titleSmall)//注册组件

以下为main.js完整内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import './style/public.scss';
import './assets/text/text.css';
import titleSmall from './views/form/titleSmall.vue';
Vue.component('title-small',titleSmall)
Vue.prototype.$axios = axios
Vue.use(ElementUI);
Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

最终实现效果如下

三、总结

在日常使用中应该尽量避免使用全局引入，这会大大增加项目体积，在组件复用性不高的情况下，应该使用局部引入，只有在组件复用性非常高的时候才应该考虑使用全局引入。