资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

如何正确的使用Vue组件

如何正确的使用Vue组件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站自2013年起，是专业互联网技术服务公司，拥有项目成都做网站、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元威海做网站,已为上家服务,为威海各地企业和个人服务,联系电话:18980820575

Vue组件概述

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

组件是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容

下面是一个最简单的模块示例


  

Vue注册组件

组件注册包括全局注册和局部注册两种

全局注册

要注册一个全局组件，可以使用 Vue.component(tagName, options)

Vue.component('my-component', {
 // 选项
})

组件在注册之后，便可以在父实例的模块中以自定义元素 的形式使用

[注意]要确保在初始化根实例之前注册了组件


 

局部注册

通过使用组件实例选项components注册，可以使组件仅在另一个实例/组件的作用域中可用


 

组件树

使用组件实例选项components注册，可以实现组件树的效果


 

对于大型应用来说，有必要将整个应用程序划分为组件，以使开发可管理。一般地组件应用模板如下所示


 
 
  
  
 

v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来

Vue.component('my-component', {
 template: 'hello world!...'
})

Vue组件的模板分离

在组件注册中，使用template选项中拼接HTML元素比较麻烦，这也导致了HTML和JS的高耦合性。庆幸的是，Vue.js提供了两种方式将定义在JS中的HTML模板分离出来

script

在script标签里使用 text/x-template 类型，并且指定一个 id


 
Hello hello hello


Vue.component('hello-world', {
 template: '#hello-world-template'
})

上面的代码等价于

Vue.component('hello-world', {
 template: '
Hello hello hello
'
})

下面是一个简单示例


 


 
hello world!
 

template

如果使用

Vue组件的命名约定

对于组件的命名，W3C规范是字母小写且包含一个中划线(-)，虽然Vue没有强制要求，但最好遵循规范　 

当注册组件时，使用中划线、小驼峰、大驼峰这三种任意一种都可以

// 在组件定义中
components: {
 // 使用 中划线 形式注册
 'kebab-cased-component': { /* ... */ },
 // 使用 小驼峰 形式注册
 'camelCasedComponent': { /* ... */ },
 // 使用 大驼峰 形式注册
 'PascalCasedComponent': { /* ... */ }
}

Vue组件嵌套限制

并不是所有的元素都可以嵌套模板，因为要受到HTML元素嵌套规则的限制，尤其像