Vue.js组件

目录

一、组件简介

1、什么是组件

2、为什么使用组件

二、组件的使用

1、组件的创建

（1）全局注册组件

（2）局部注册组件

2、组件的数据和方法

---

一、组件简介

        组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用，几平任意类型的应用界面都可以抽象为一个组件树，如下图所示

1、什么是组件

        组件的出现，就是为了拆分 Vue 实例的代码量，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。需要区分的是，模块化是从代码逻辑的角度进行划分的，主要是为了方便代码分层开发，保证每个功能模块的职能单一:而组件化是从 UI界面的角度进行划分的，前端的组件化，方便 UI组件的重用。下面来看一个使用 Vue.js 完成的计数器组件示例，具体如示例一所示。        

示例一：

 Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">你单击了{{count}}次</button>'
        })

        组件是可复用的 Vue 实例，且带有一个名字:在这个例子中是<buton-counter>。开发人员可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用:

    <div id="app">
        <button-counter></button-counter>
    </div>

实例对象:

        var vm=new Vue({
            el:'#app'
        })

运行如图所示

        组件是可复用的 Vue实例，它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等，除了el，它是根实例特有的选项。

2、为什么使用组件

        以上述计数器为例，如果不使用组件，使用 JavaScript 方法也可以完成，但是如果要多次调用，就需要将代码多次复制粘贴，造成代码重复冗余，使用组件可以轻松地进行任意次数的复用，代码如下:

    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

---

在上述代码中调用了3次组件，运行效果如下：

        从上述代码中不难发现，使用组件可以方便重复使用，减少代码重复冗余，便于多人协同开发，有助于提高开发效率，提升整个项目的可维护性。

二、组件的使用

1、组件的创建

        为了能在模板中使用，这些组件必须先注册以便 Vue.js 能够识别。组件注册有两种类型:全局注册和局部注册。接下来分别来看如何注册全局组件以及局部组件。

（1）全局注册组件

        全局注册的组件可以用在其被注册之后的任何(通过 new Vue)新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
        注册组件需要使用 Vue.extend方法创建一个组件模板对象，再使用 Vue.component 方法进行注册。Vue.extend 方法格式如下:

var coml=Vue.extend({
    template:'<h3>这是myComl组件</h3>'
})

        如果想要在其他地方使用这个创建的组件，需使用 Vue.component 方法注册组件的同时为组件命名，Vue.component 方法格式如下:

        Vue.component('myComl',coml)

        其中myCom1为自定义的组件名称，需要注意的是，如果组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用“-”连接，例如上述的myCom1使用时需变化为<my-com1>，如果不使用驼峰形式的命名，则直接使用名称，命名之后即可在HTML标签中使用这个组件名称，像使用DOM元素一样，引人页面中即可，方法如下:

    <div id="app">
        <my-coml></my-coml>
    </div>

上述创建组件和注册组件可合并，具体代码如下:

Vue.component('myComl',Vue.extend({
    template:'这是myCom1组件</h3>'
}))

其中，Vue.extend 方法名称可省略，具体代码如下:

Vue.component('myComl'，{
    template:'<h3>这是myCom1组件</h3>'
})

整理代码，看一下上述案例的完整代码，具体如下所示：

<div id="app">
<my-com1></my-com1>
</div>
<script>
Vue.component('myCom1'{
    template:'<h3>这是myCom1 组件</h3>'
})
var vm=new Vue({el:' #app'});
</script>

运行效果如下图所示：

（2）局部注册组件

        局部组件又称为私有组件，私有组件是通过 Vue 实例的 components 属性来实现的，下面通过实例来演示。

<divid="app">
<vmcom1></vmcom1>
</div>
<templateid="tmpl">
<div>
<h3>我是 vm 实例对象的私有组件 tmpl</h3>
</div>
</template>
<script>
var vm=new Vue({
    el:'#app,
    data:{},
    methods:{},
    components:{
        //创建局部组件,组件名称为vmcoml
        vmcoml:{
            template:'#tmp1'
        }
    }
})
</script>

私有组件只能在创建该组件的 Vue 实例对象控制的区域使用，其他 Vue 实例对象是无法使用的。

2、组件的数据和方法

        组件中除了 template 选项外，还可以像 Vue 实例那样使用其他的选项，例如 data、com-puted、methods 等。组件中的 data 跟 Vue 实例对象中的 data 有点不一样，实例对象中的 data为一个对象，而组件中的 data 必须是一个函数，且必须将数据 return 出去，例如下所示。

<div id="app">
<mycom1></mycom1>
</div>
<script>
Vue. component('mycoml'，(
    template:'<div>{{msg}}</div>',
    data:function (){
        return{
            msg:'mycom1组件内容'
        }
    }
})
var vm=new Vue({
    el:' #app',
    data:{},
    methods:{},
});
</script>

        为什么组件中的 data 不能为一个对象呢?大家知道 JavaScript 对象是引用关系，如果retumn 出的数据引用了外部的一个对象，那么这个对象就是共享的，任何一方修改都会同步以最开始写的计算器为例，如果组件中的 data 为一个外部对象被 return 的时候，单击的次数为共享的，单击任何一个按钮，其他按钮的数据都会发生变化。

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
<script>
var dataObj={
    count:0
}
Vue.component('button-counter'，{
    data:function (){
        return dataObj
    },
    template:'<button v-on:click="count++">你单击了{{count]}次</button>'
})
var vm=new Vue({el:'#app'})
</script>

运行结果如图所示

        显然，这种结果是不符合需求的，数据共享的话失去了复用的作用，所以需要给组件一个新的 data 对象来独立，实例代码如下:

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
<script>
Vue.component('button-counter'，{
    data:function (){
        return{
            count:0
        }
    },
    template:'<button v-on:click="count++">你单击了{{count]}次</button>'
})
var vm=new Vue({el:'#app'})
</script>

这样，三个按钮互不影响，多次调用也互不干扰，完全达到复用的目的。