Question

我是Vue框架的新手，并且经常停留在基础知识上。目前我坚持以下方案。

我通过以下方式创建/构建可重用的组件：

Vue.component('SomeReusableComponent', {
    props: [ ... ],
    template: `
        <Some HTML>
    `
})

但我也看到其他人创建/构建这样的组件：

const SomeReusableComponent = {
    props: [ ... ],
    template:`
        <Some HTML>
    `
}

两者有什么区别？每个用例是什么？我的意思是，我还可以将Vue.component附加到const，它基本上会变成相同或不相同？

提前致谢

Answer 1

vue组件只不过是一个简单的javascript对象，其中包含data，template，computed等组件选项作为其属性。

两者有什么区别？

Vue.component(componentName, componentOptions)创建一个全局组件。像这样创建的组件可以在任何地方使用而无需注册它。

例如： Vue.component（＆＃39; global-comp＆＃39;，{template：＆＃39;这是全局组件＆＃39;）

以上创建的组件可以直接用作：

//another-component
  <div>
    <global-comp></global-comp>
  </div>

现在是另一种类型的组件。

如上所述，组件只是普通对象

例如：

const MyComponent ={
    template: '<div>My {{text}} component</div>',
    data(){
      return{
        text: 'awesome'
      }
    }
  }

要在另一个组件中使用上述组件，您需要在components选项下注册，如下所示

//another component
  <div>
    <my-component></my-component>
  </div>

  <script>
    //another component
    export default{
      name: 'Another',
      //this is required to register my-component if 
      //it is not global i.e not defined using Vue.component()
      components:{
        'my-component': MyComponent
      }
    }
  </script>

注意：

您不希望全局注册每个组件污染全局命名空间。

您不需要在多个地方使用的每个组件。

将来，当您学习延迟加载组件时，您不需要用户在初始捆绑中可能不需要的组件并增加其大小

文档 - Component Registration

Answer 2

Vue.component函数注册组件以供全局使用。因此，如果您注册Vue.component('my-awesome-component', { /* params */ })，则可以在任何其他组件模板中使用<my-awesome-component>。
当您使用const声明第二个示例之类的对象时，您必须注册此组件以及Vue.component函数的进一步操作或父组件中的 components 部分（仅在父组件中本地使用）。
```
//in parent component
import MyAwesomeComponent from "./my-awesome-component";

export default {
...
    components: { MyAwesomeComponent }
...
}
```

“const”和“Vue.component”之间的区别

2 个答案: