Vue项目全局和局部组件

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>