【Vue.js 牛刀小试】：第八章 - 组件的基础知识

时间 2019-11-07

原文原文链接

系列目录地址

前言

在以前的学习中，咱们对于 Vue 的一些基础语法进行了简单的了解，经过以前的代码能够清晰的看出，咱们在使用 Vue 的整个过程，最终都是在对 Vue 实例进行的一系列操做。html

这里就会引出一个问题，就像咱们刚开始学习 C# 的时候把所有的代码一股脑的写到 Main 方法中，如今咱们把全部对于 Vue 实例的操做所有写在一块，这必然会致使这个方法又长又很差理解。前端

在 C# 的学习过程当中，随着不断学习，咱们开始将一些类似的业务逻辑进行封装，重用一些代码，从而达到简化的目的。那么，如何在 Vue 中如何实现类似的功能呢？这里就须要提到组件这一律念了，本章，咱们就来学习 Vue 中组件的基础知识。vue

仓储地址：Chapter02-Bronze Component Conceptgit

干货合集

1、组件是什么程序员

组件是 Vue 中的一个重要概念，它是一种抽象，是一个能够复用的 Vue 实例，它拥有独一无二的组件名称，它能够扩展咱们的 HTML 元素，以组件名称的方式做为咱们自定义的 HTML 标签。由于组件是可复用的 Vue 实例，因此它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。github

例如，在一个系统的绝大多数的网页中，网页都包含 header、menu、body、footer 等等部分，在不少时候，同一个系统中的多个页面，可能仅仅是页面中 body 部分显示的内容不一样，所以，咱们就能够将系统中重复出现的页面元素设计成一个个的组件，当咱们须要使用到的时候，引用这个组件便可。编程

不过，与咱们在写 C# 时对代码进行模块化的划分不一样，模块化主要是为了实现每一个模块、方法的职能单一，咱们通常是经过代码逻辑的角度进行划分；而 Vue 中的组件化，更多的是为了实现对于前端 UI 组件的重用。

在 Vue 中建立一个新的组件以后，为了能在模板中使用，这些组件必须先进行注册以便 Vue 可以识别。在 Vue 中有两种组件的注册类型：全局注册和局部注册。segmentfault

全局注册的组件能够用在其被注册以后的任何 (经过 new Vue) 新建立的 Vue 根实例，也包括其组件树中的全部子组件的模板中使用；而局部注册的组件只能在当前注册的 Vue 实例中进行使用。app

2、全局组件的建立方式模块化

在 Vue 中建立全局组件，一般的作法是先使用 Vue.extend 方法构建模板对象，而后经过 Vue.component 方法来注册咱们的组件，由于，组件最后会被解析成自定义的 HTML 代码，所以，咱们能够直接在 html 中经过组件名称做为标签使用。

<div id="app">
    <com></com>
</div>

<script> //一、使用 Vue.extend 构建模板对象 var comElement = Vue.extend({ template: '<h3>这是使用 Vue.extend 建立的组件，啊啊啊啊啊啊</h3>' }) //二、使用 Vue.component 注册全局组件 Vue.component('com', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

从控制台中能够看到，咱们自定义的组件已经被解析成了 HTML 元素。这里，须要注意一个问题，当咱们采用 Camel 的方式命名咱们的组件时，在使用这个组件的时候，须要将大写字母改为小写字母，同时，两个字母之间须要使用 - 进行链接。

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

<script> //一、使用 Vue.extend 构建模板对象 var comElement = Vue.extend({ template: '<h3>这是使用 Vue.extend 建立的组件，啊啊啊啊啊啊</h3>' }) //二、使用 Vue.component 注册全局组件 Vue.component('myCom', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

固然，咱们也能够直接在 Vue.component 中以一种相似 C# 中的匿名对象的方式直接注册全局组件。

<div id="app">
    <com2></com2>
    <com3></com3>
</div>

<script> Vue.component('com2', Vue.extend({ template: '<h3>这是直接使用 Vue.component 建立的组件，啊啊啊啊啊啊</h3>' })) Vue.component('com3', { template: '<h3>这是直接使用 Vue.component 建立的组件，啊啊啊啊啊啊</h3>' }) var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

上面的示例中，只是在 template 属性中定义了一个简单的 html 代码，在实际的使用中，template 属性指向的模板内容可能包含不少的元素，而使用 Vue.extend 建立的模板必须有且只有一个根元素，所以，当须要建立具备复杂元素的模板时，你能够在最外层再套一个 div。

<div id="app">
    <com></com>
</div>

<script> //一、使用 Vue.extend 构建模板对象 var comElement = Vue.extend({ template: '<h3>这是使用 Vue.extend 建立的组件，啊啊啊啊啊啊</h3><h4>呜呜呜呜</h4>' }) //二、使用 Vue.component 注册全局组件 Vue.component('com', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

当 template 属性中包含不少的元素时，不能使用代码提示仍是会显得比较不方便，这时，咱们可使用 template 标签来定义咱们的模板，经过 id 来肯定组件的模板信息。

<div id="app">
    <com></com>
</div>

<template id="tmpl">
    <div>
        <h3>这是使用 Vue.extend 建立的组件，啊啊啊啊啊啊</h3>
        <h4>呜呜呜呜</h4>
    </div>
</template>

<script> Vue.component('com', { template: '#tmpl' }) var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

3、局部组件的建立方式

某些时候，咱们注册的组件只想在一个 Vue 实例中使用，若是仍是使用全局注册的方式注册组件就显得不太合适了，这时，咱们就可使用局部注册的方式注册组件。在 Vue 实例中，咱们能够经过 components 属性注册仅在当前做用域下可用的组件。

<div id="app">
    <simple-com></simple-com>
</div>

<div id="app2">
    <simple-com></simple-com>
</div>

<template id="local">
    <h4>我是局部注册的组件啊啊啊啊啊啊啊啊</h4>
</template>

<script> var vm = new Vue({ el: '#app', data: {} }); var vm2 = new Vue({ el: '#app2', data: {}, components: { 'simple-com': { template: '#local' } } }); </script>
复制代码

能够看到，在上面的例子中，局部注册的组件只能在注册的 vm2 实例中完成解析，当咱们在 vm 实例中引用这个组件时，是没法正确解析这个自定义的组件元素的。

总结

在本章中，主要介绍了组件是什么，以及如何经过全局/局部的方式注册咱们的组件。在咱们使用组件的过程当中，很大的可能会接触到两个组件之间的数据交互，以及如何为咱们的组件设定事件，在下一章中，咱们将进一步的学习 Vue 中的组件相关知识点。

参考

一、Vue.js——60分钟组件快速入门（上篇）

二、认识Vue组件

三、Vue 2.0学习笔记：组件的使用

四、初学vue2.0-组件-文档理解笔记v1.0

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712