vue中的组件注册和文档中的区别？

Question

vue官方文档提供的组件方式是：

Vue.component('my-component', {
  code here
})

一些项目中的组件形式

<template lang="html">

</template>

<script>
    export default{
      
    }
</script>

<style lang="css">

</style>

这两种组件创建的方式有什么不一样吗？

Answer 1

• 这是全局注册组件。

  Vue.component('my-component', {
    code here
  })

• 这是单文件组件，声明了一个组件的表现形式（实例），还没有完成注册，你可以把单文件组件里的代码当作Vue.component()的第二个参数里的东西。

  // demo
  <template lang="html">
  </template>
  <script>
      export default{
      }
  </script>
  <style lang="css">
  </style>

  使用的时候进行注册，可以使用Vue.component('el-demo', Demo)或者components: {Demo}的形式进行注册。

• 你所看到的大部分的组件库，使用说明里都有Vue.use(组件库)的方式，就是在进行Vue.component()全局注册，而按需加载，用哪个引哪个import Button from 'xxx', components: { Button }就是另一种了。

Answer 2

你可以查一下vue单文件组件，这也是项目中最常使用的组件组织形式。

Answer 3

第一种方式是全局注册组件，第二种方式不在main里注册的话一般是局部注册组件。