Vue项目全局和局部组件

关注

原创最新推荐文章于 2026-03-02 01:35:26 发布 327 阅读 AI 写同款· GEO 优化 ›

vue-cli3注册全局组件与注册局部组件 vue-cli3 注册全局组件与注册局部组件注册全局组件 注册全局组件 一定要在main.js里面，main.js是逻辑入口文件。全局注册的组件，在任何地方都是可以使用的。 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //注册全局组件在main.js ,在任何地方都可以使用该组件 // 第一步引入阅读详情

Vue项目开发过程中，通常我们会把一些常用或者通用的功能抽取出来作为全局或者局部组件，代码复用率和项目扩展性相对会好一点，下面我们详细看下具体的定义和使用吧
定义组件内容

新建TestComponent.vue文件，并添加组件内容

<template>
  <div>
    {{ name }}
  </div>
</template>
<style lang="stylus" scoped>
//样式...
</style>
<script>
export default {
  props: {    
    name: String
  },
  methods: {
    test() {
      console.log('test')
    }
}
</script>

全局组件
main.js中引入并全局注册组件

import TestComponent from './TestComponent.vue'
Vue.component('TestComponent', TestComponent)

全局范围内可通过<TestComponent></TestComponent>的形式调用组件

局部组件
具体页面中引入并声明组件,template中添加组件

<template>
  <div>
    <TestComponent :name="test"></TestComponent>
  </div>
</template>
<script>
import TestComponent from './TestComponent'
export default {
  components: { OrderNav },
  data() {
    test: 'test'
  }
 }
</script>