Vue全局组件和局部组件的写法

3,039 阅读1分钟

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> 

参考:

Vue全局组件和局部组件