Vue.js2.0之组件篇

本篇文章不做基本的安装功能；具体安装步骤教程请跳转Vue2.0快速入门以及中文官网；

本篇文章所有的代码编写均在Vue2.0的基础上完成，请区别于Vue1.0版本；

---

什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

简单点来介绍就是组件可以讲功能模块代码拆分成一个一个的小模块去实现，最后将这些小模块组合起来变成一个SPA页面(single page web application，SPA)或者多个可复用模块的页面；

---

使用

Vue的组件必须要在Vue实例化之后才能使用；

new Vue({  el: '#some-element',   //实例的入口位置  // 很多选项 data，method，computed等等})

注册

1. 全局注册

//自定义组件标签的名称尽量按照W3C标准来设计（小写，并且包含一个短杠）Vue.component('my-component', {  // 选项})

当组件注册完成之后，我们就可以在它的父实例模块中定义组件了
（图就不截了，如果能把Vue跑起来，看不看图意义不大）

**JS**--//全局注册（这里面的data必须是一个函数）Vue.component('global-component', {  template: '<div>{{ message }}</div>',  data: function() {    return {message: '我是全局组件'}  }})// 创建根实例new Vue({  el: '#example'})

**html**----<div id="app">                                                    <global-component></global-component></div>

2. 局部注册

局部注册可以使组件仅在另一个实例/组件的作用域中可用：避免全局注册造成的资源浪费

**JS**--//局部注册const local_component = {  template: '<div>我是局部组件,使用const申明</div>'}new Vue({  el: '#app',  // ...  components: {    'local_component': local_component  //等同 local_component  }})

HTML----<div id="app"><local_component></local_component></div>

这两种官网都有介绍，接下来，我在介绍几种常用的组件编写方式；

3. 其他组件方式-1 导入方式

这一种也是比较常见，我称为模板之间组件构建,优点就是模板之间相互独立，也可以进行通信；

页面结构
|—html
|—main.js
|—App.vue

我们先定义一个 App.vue文件（每一个*.vue文件你可以看作一个模板），内容如下

**App.vue**-------<template>  <div id="app">    {{appMsg}}  </div></template><script>export default {  name: 'app',  data(){    return {      appMsg:'我是导入过来的组件的template'    }  }}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

接着我们将这个文件导入我们需要构建组件的 main.js页面；

import App from './App'new Vue({  // ...  components: {    App   //将这个组件注册到我们的Vue实例中去  }})

HTML页面代码

**HTML**----<div id="app"><App></App></div>

这样的方式就可以将模板注册到组件中

4. 其他组件方式-2 页面嵌套

前面我们提到的都是页面中嵌套一种或多种组件，接下来我们展现的是在组件中嵌套组件，也就是父子组件

HTML----  <div style="border:1px solid #ccc;width:500px;">      <div>{{parent.name}}</div>      <!--模版挂载标识-->      <children></children>  </div>  <template id="child-template">    <p style="background:#eee;">{{txt}}</p>  </template>

JS--Vue.component('children', { //child是模版挂载的标签名  template: '#child-template', //id对应子组件的ID  data: function() {    return {txt: '这里是子组件的内容'}  }});new Vue({  el: '#app',  data: {    parent: {      name: '这里是父组件的内容'    }  }})

请注意看这里的

 <div style="border:1px solid #ccc;width:500px;">      <div>{{parent.name}}</div>      <!--模版挂载标识-->      <children></children>  </div>

这里是父组件范围，我们在父组件的范围内添加了一个这样的自定义组件，也就是我这个模板所表示的数据；

<template id="child-template">    <p style="background:#eee;">{{txt}}</p>  </template>

我们通过最Vue实例组件的全局注册去构建它的data ,template等数据

Vue.component('children', { //child是模版挂载的标签名  template: '#child-template', //id对应子组件的ID  data: function() {    return {txt: '这里是子组件的内容'}  }});

你们一定发现了 这里的children就是下面模板的内容，我们也可以将模板的内容放到*.vue文件里面
，这和我们在3.1中所看到的实际上是一样的；

5. 其他组件方式 模板嵌套-3

HTML----<div>      <outer></outer>      <inner></inner>      <inner></inner>      <inner></inner></div>

JS--//定义内部组件，内部组件必须在外部组件之前定义const Inner = Vue.extend({template: '<div style="color:red">这里是内部组件</div>'})//定义外部组件const Outer = Vue.extend({  template: '<div style="border: 1px solid #ccc;width:200px;">外部组件内部<inner-component></inner-component></div>',  components: {    // 调用内部组件    'inner-component': Inner  }})// 注册父组件Vue.component('outer', Outer);//复用子组件。Vue.component('inner', Inner);// 创建根实例，所有组件都需要在根实例之前创建。new Vue({  //  ...})

以上几种方式都是常见的组件的使用；
在组件使用的时候注意两点：
在里面的data一定是一个函数

Vue.component('component-name',{// ...,    data:function(){        return //...    }})

第二点需要注意的是组件中的is属性，我找了一篇相对比较好理解的文章做一个分享：
如何理解Vue组件中所说的is特性?

6.总结

Vue2.0 常见的组件构建方式就这么几种，关键看如何灵活的运用起来；

1. 全局注册：使用Vue.component(‘name’,{})的方式进行注册，component不能使用实例的data ，但是可以在component中使用data 声明变量，data的使用只能使用函数形式，还可以有method等等方法，不需要重新在实例中注册；但是必须要有Vue实例；

2. 局部注册：局部注册可以认为是定义一个变量，这个变量里面存放的是一个对象，使用的时候需要要在实例中的components 中注册，或者在Vue.component(‘别名’,’对象名’)；

3. 继承（Vue.extend()）, 我这里有一篇和你详细的关于Vue.extend()和Vue.component

4. 模板之间的组件；构建模板组件之前需要您将模板引入到需要父实例页面，也就是初始化new Vue()的页面，同时还需要在实例对象中的components中注册，或者在Vue.component(‘别名’,’对象名’)；

5. 组件之间的内部嵌套：组件之间的内部嵌套无非是在父组件中嵌套子组件，需要在父组件中的components注册子组件；同时也需要在Vue实例对象中先注册父组件，然后再注册子组件；