Vue.js组件

组件是接口的单个独立单元。他们可以有自己的状态，标记和样式。

如何使用组件

Vue组件可以通过4种主要方式进行定义。

让我们谈谈代码。

第一个是：

new Vue({
  /* options */
})

第二个是：

Vue.component('component-name', {
  /* options */
})

第三个是通过使用本地组件：只能由特定组件访问而在其他地方不可用的组件（用于封装的组件）。

第四个在.vue文件，也称为单个文件组件。

让我们详细介绍前三种方式。

使用new Vue()或者Vue.component()是在构建不是单页应用程序（SPA）而是仅在某些页面中使用Vue.js的应用程序时使用Vue的标准方法，例如在联系表单或购物车中。也许在所有页面中都使用了Vue，但是服务器正在渲染布局，然后您将HTML提供给客户端，然后客户端将加载您构建的Vue应用程序。

在SPA中，由Vue构建HTML，使用单文件组件更为方便，因此更常见。

您可以通过将Vue安装在DOM元素上来实例化Vue。如果你有一个<div id="app"></div>标签，您将使用：

new Vue({ el: '#app' })

用初始化的组件new Vue没有相应的标签名称，因此通常是主要的容器组件。

应用程序中使用的其他组件使用进行初始化Vue.component()。这样的组件允许您定义一个标签，您可以使用该标签将组件多次嵌入应用程序中，并在组件中指定组件的输出。template财产：

<div id="app">
  <user-name name="Flavio"></user-name>
</div>

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})
new Vue({
el: ‘#app’
})