Vue.js组件的简介和使用

一、组件的简介

组件时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组件化开发可以提高代码的模块化和可维护性，使得开发更加高效。