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’ })

Tech Wiki Online!