vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。
全局组件引入写法:在项目的main.js中:
import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件
Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();
Vue.component('my-component', MyComponent); //初始化组件
new Vue({
el: '#app',
router,
components: {
App,
MyComponent
},
template: '<App/>',
});
局部组件引入写法:在需要使用组件的a.vue文件中:
<template>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {MyComponent}, // 直接初始化就可以啦,不需要Vue.use();
data() {},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>