Vue核心技术-15,组件的介绍和简单使用

一,前言

Vue.js借鉴了ReactJs的组件化思想,组件是Vue.js最核心的功能,
组件是整个框架设计最精彩的地方,当然也是最难掌握的一部分
这篇介绍组件以及组件的使用方法

---

二,什么是组件

Vue.js引入组件概念是为了提高代码的复用性,同时也提高了代码的可维护性
我们可以使用Vue提供的组件功能,自定义自己的标签元素,如<myElement>
可以将特定的控件,样式,逻辑都封装到自定义标签元素中,即组件中
在Vue中进行注册后便可以在任何地方进行使用,为我们的开发带来极大的遍历

---

三,组件的注册和使用

Vue组件的使用非常简单,只需要对组件进行定义,注册后,即可使用
组件需要注册后才可以使用,注册方式分为全局注册和局部注册两种方式

全局注册:

使用Vue.component进行组件的全局注册
全局注册后,Vue的所有实例都可以对其进行使用
注意:全局注册需要在Vue实例化之前进行注册,否则无效

局部注册:

在Vue实例中使用components选项进行组件的局部注册
局部注册后,只在当前Vue实例作用域下有效

以下面的例子演示组件的两种注册及使用方式:

<div id="app">
    <!--组件需要注册后才可以使用,注册方式分为全局注册和局部注册两种方式-->
    <!--自定义标签名称的命名方式推荐使用小写减号进行分隔-->

    <!--全局组件-->
    <!--使用Vue.component进行组件的全局注册-->
    <!--全局注册后,Vue的所有实例都可以对其进行使用-->
    <!--注意:全局注册需要在Vue实例化之前进行注册-->
    <my-component-global></my-component-global>

    <!--局部组件-->
    <!--在Vue实例中使用components选项进行组件的局部注册-->
    <!--局部注册后,只在当前Vue实例作用域下有效-->
    <my-component-local></my-component-local>
</div>

<script type="text/javascript">

    // 全局注册 my-component-global为自定义标签名称,
    // 实例化前进行注册,对Vue所有实例生效
    Vue.component('my-component-global',{
        // template的DOM结构必须被一个元素所包含,否则无法被渲染
        template:'<div>自定义组件-全局注册</div>'
    });

    const vm = new Vue({
        el: '#app',
        // 局部注册 my-component-local为自定义标签名称,只对当前Vue实例有效
        components:{
            'my-component-local': {
                template:'<div>自定义组件-局部注册</div>'
            }
        }
    })
</script>

运行结果:

全局注册和局部注册的组件生效且可以通过devTools观察各个组件的状态

---

三,使用is属性挂载组件

组件模板的使用有时会受到Html语法的限制,
例如<table>中只能使用<tr><td><th>这类标签,还有<ul><ol><select>等

这时可以使用Vue提供的is属性对组件进行挂载

<div id="app">
    <table>
        <!--使用is属性对组件进行挂载-->
        <tbody is="my-component"></tbody>
    </table>
</div>

<script type="text/javascript">
    // is属性挂载组件
    Vue.component('my-component',{
        template:'<div>is属性挂载组件</div>'
    });

    const vm = new Vue({
        el: '#app'
    })
</script>

运行结果:

从输出的DOM中可以看到,在渲染时组件内容替换了tbody标签元素

---

四,组件的其他选项及使用注意

组件除了可以配置template选项外,可以和Vue实例一样使用其他选项
这些选项包含data, computed, methods等

data属性的使用需要几点注意
在组件中,data选项必须为函数,且需要在函数中将数据return出去

<div id="app">
    <!--组件中使用data选项-->
    <my-component-data></my-component-data>
</div>

<script type="text/javascript">
    // 组件中使用data选项
    Vue.component('my-component-data',{
        template:'<div>{{ message }}</div>',
        // 使用data使用提供template数据
        data:function () {
            return {
                message: '来自data选项的message'
            }
        }
    });

    const vm = new Vue({
        el: '#app'
    })
</script>

运行结果:

注意:

由于组件是可以被复用的,而在javaScript中对象属于引用类型,
所以data选项return出来的对象如果使用了外部对象(引用类型),
这个对象将被所有当前组件所共享,多个组件的状态会相互影响

大多数情况,多个组件的状态需要保持彼此隔离,
这时,再定义组件的data选项时,最好为每个组件定义一套属于自己的内部变量

---

###五,结尾

本篇介绍了组件的定义,注册和使用方式,以及使用的注意事项
对于组件这只是一个开始,封装起来的组件是可以进行外部传参的,
下一篇介绍组件通过props进行传参