Vue基础-2

由也_
412 阅读3分钟

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

吃饱才有力气写代码~

在Vue基础-1中，简单介绍了一些Vue常用的概念，当然相关内容还可以扩展很多。那今天我们就一起来总结一下Vue组件相关知识点。

一.组件

什么是组件呢？
通常一个应用会以一颗嵌套的组件数的形式来组织：比如页面上的页头、侧边栏、内容区等组件，每个组件又会包含其它组件，比如导航链接、博文之类的组件。

二.用途

为什么要组件化？
高内聚性：
组件功能必须是完整的，比如要实现一个下拉菜单功能，那么在下拉菜单的组件中，就要把下拉菜单所需要的功能全部实现。
低耦合度：
通俗点说，代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们可能会经常涉及到团队协作，传统按照业务线去编写代码的方式会很容易互相冲突，那组件化的方式就可以大大避免这种冲突，每个组件都有自己清晰的职责，完整的功能，较低的耦合度也会便于单元测试和重复利用。
总体来说：

  • 提高开发效率
  • 方便重复利用
  • 简化调试步骤
  • 提升项目整体可维护性
  • 便于协同开发

三.注册

3.1 全局注册

通过Vue.component 来创建组件：

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

这样它们在注册之后可以用在任何新创建的Vue根实例 (new Vue)的模板中。

<div id="app"> 
    <component-a></component-a> 
    <component-b></component-b> 
    <component-c></component-c> </div>

<script>
    Vue.component('component-a',{/*...*/})
    Vue.component('component-b',{/*...*/})
    Vue.component('component-c',{/*...*/})
    new Vue({el:'#app'})
</script>

在所有的子组件中也是如此，即这三个组件在各自内部也可以相互使用。

3.2 局部注册

因为全局注册在组件不使用的情况下仍然会被包含在项目最终的构建结果中，这回造成用户下载JS量的无谓增加。
所以在这些情况下，可以通过一个普通的JS对象来定义组件，然后在components选项中定义需要使用的组件。

    var ComponentA = { /* ... */ } 
    var ComponentB = { /* ... */ } 
    var ComponentC = { /* ... */ }


    new Vue({ el: '#app', components: {
        'component-a': ComponentA, 
        'component-b': ComponentB 
        } 
    })

对于components对象的每个property来说，property名就是自定义元素的名，property值就是这个组件的选项对象。
注意：局部注册的组件在其子组件中不可用，例如你希望 ComponentA 在 ComponentB 中可用，则需要这样写：

    var ComponentA = { /* ... */ } 
    var ComponentB = {
        components: { 
            'component-a': ComponentA 
        }, // ... 
    }

或者通过 Babel 和 webpack 使用 ES2015 模块，代码如下：

    import ComponentA from './ComponentA.vue' 
        export default { 
            components: { 
                ComponentA 
            }, // ... 
    }

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

  • 用在模板中的自定义元素的名称
  • 包含了这个组件选项的变量名
avatar
文章
阅读
粉丝