一、组件的简介
组件时Vue.js最强大的功能之一,组件可以扩展HTML元素,也可以封装可重用的代码,组件系统让开发人员可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用界面都可以抽象为一个组件树如下图。
1.什么是组件
组件的出现,就是为了拆分Vue实例的代码量,能够让开发人员以不同的组件,来划分
不同的功能模块,将来需要什么样的功能,去调用对应的组件即可。需要区分的是,模块化
是从代码逻辑的角度进行划分的,主要是为了方便代码分层开发,保证每个功能模块的职能
单一;而组件化是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用。下面 enter来看一个使用Vue.js完成的计数器组件示例,代码如下:
//定义一个叫button-counter的新组件
Vue.component('button-counter',{
data:function(){
return{
count:0
}
},
template:'<button v-on:click="count++">你单机了{{count}}次</button>'
})
组件是可以复用的Vue实列,且带有一个名字:在例子中是<button-counter>。开发人员可以在通过new Vue创建的Vue根实列中,把这个组件作为自定义元素来使用:
<div id="app">
<button-counter></button-counter>
</div>
实例对象:var vm=new Vue{{el:'#app'}}结果如下图:
2.为什么要使用组件
以上述计数器为例,如果不使用组件,使用 JavaScript方法也可以完成,但是如果要多次
调用、就需要将代码多次复制粘贴,造成代码重复冗余,使用组件可以轻松地进行任意次数
的复用,代码如下:
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
从上面代码中,组件调用了3次,效果图如下
由此可以看出,使用组件可以方便重复使用,减少代码重复冗余,便于多人协同开发,有助于提高开发效率,提升整个项目的可维护性。
二、组件的创建
为了能在模板中使用,这些组件必须先注册以便Vue.js能够识别。组件注册有两种类型:全局注册和局部注册。
1.全局注册组件
全局注册的组件可以用在其被注册之后的任何(通过new Vue)新创建的Vue根实例,也包括其组件树中的所有子组件的模板中。
注册组件需要使用Vue.extend方法创建一个组件模板对象,再使用Vue.component方法进行注册。Vue.extend方法格式如下:
var com1=Vue.extend({
template:'<h3>这是myComl组件</h3>'
})
如果想要在其他地方使用这个创建的组件,需要使用Vue.component方法注册组件的同时为组件命名,Vue.component方法格式如下:
Vue.component('myCom1',com1)
其中myComl为自定义的组件名称,需要注意的是,如果组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时,两个单词之间,使用“-”连接,例如上述的myComl使用时需变化为<my-com1>,如果不使用驼峰形式的命名,则直接使用名称,命名之后即可在HTML标签中使用这个组件名称,像使用DOM元素一样,引入页面中即可,方法如下:
<div id="app">
<my-com1></my-com1>
</div>
上面创建组件和注册组件可合并,代码如下:
Vue.component('myCom1',Vue.extend({
template:'<h3>这是myCom1组件</h3>'
})
其中,Vue.extend方法名可以省略。
整理代码总代码如下:
<div id="app">
<my-com1></my-com1>
</div>
<script>
Vue.component('myCom1',{
template:'<h3>这是myCom1组件</h3>'
})
var vm=new Vue{{el:'#app'}};
</script>
运行效果如图:
在前面的开发中,template模板是用字符串表示的,这种方式的开发既容易出错,又不便于复杂页面的编写,Vue.js提供了<template>标签来定义组件结构的模板,模板代码直接写在HTML结构中,通过id值绑定到组件内的template属性上,这样有利于代码提示以及高亮显示,能改善开发体验,提高开发效率,下面通过实例来看看使用<template>标签如何创建组件。
使用<template>创建组件。
<div id="app">
<mycom></mycom>
</div>
<template id="tmp1">
<h3>这是通过template标签创建出来的组件</h3>
</template>
<script>
Vue.component('mycom',{
template:"#tmp1"
})
var vm=new Vue({el:'#app'})
<script>
上面的代码中第4行中定义了<template>标签的id为tmp1,在第9行中,通过id将模板与组件绑定起来。需要注意的是,<template>必须在被Vue实例对象控制的#app外面使用,来定义组件的HTML模板结构。
无论 是以那种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只有唯一的根元素。
2.局部注册组件
局部组件又称为私有组件,私有组件时通过Vue实例的components属性来实现的,如下面的代码:
<div id="app">
<vmcom1></vmcom1>
</div>
<template id="tmp1">
<div>
<h3>我是vm实例对象的私有组件tmp1</h3>
</div>
</template>
<script>
var vm=new Vue({
el:'#app',
data:{},
methods:{},
components:{
//创建局部组件,组件名称为vmcom1
cmcom1:{
template:'#tmp1'
}
}
})
</script>
总结:
Vue.js是一个用于构建用户界面的JavaScript框架,它采用了组件化的开发方式。组件是Vue.js中最基本的单位,通过组件可以将一个页面拆分为多个独立且可复用的部分,从而使得代码更加模块化、可维护性更高。
Vue.js组件的使用步骤大致如下:
1. 创建一个组件:可以使用Vue.component()方法来定义一个全局组件,或者在Vue实例中的components属性中定义局部组件。
2. 使用组件:在HTML模板中使用组件的标签,就可以将组件渲染到页面中了。通过在组件标签上添加props属性,可以向组件传递数据。
3. 组件通信:在Vue.js中,组件之间可以通过props属性和自定义事件来进行通信。props属性用于父组件向子组件传递数据,自定义事件用于子组件向父组件传递数据。
总结起来,Vue.js组件是构建用户界面的基本单位,可以将页面拆分为多个独立且可复用的部分。通过在组件中定义props属性和自定义事件,实现了组件之间的数据传递和通信。使用Vue组件化开发可以提高代码的模块化和可维护性,使得开发更加高效。