前端开发系列050-基础篇之组件的概念和使用(Vue)

本文是早期学习Vue整理的一些阶段性总结，内容主要关于Vue框架中组件的概念和数据传递。

一、组件的相关概念

在Vue学习的时候参考了很多文档和书籍，这些文档和书籍中总是充满各种术语(定语)，在这里先把Vue中相关的词汇搞清楚，先搞清楚谁是谁，什么是什么，它们的关系是什么样，然后才能继续后面更深入的内容。涉及到的主要概念如下：

组件：我自己的理解是可以把所有的页面中的所有组成部分都当成是组件，即可以把一切都当成是组件（比如一个简单的button按钮），不同的组件有不同的功能（有很多常用的UI组件库如iView就提供了各种丰富的组件等），组件也可大可小，大的组件代码较多能够完成丰富的功能实现和展示，小的组件也许就是一个简单的标签而已，组件可以嵌套可以组合等等。理解了这些概念之后，就会发现其实所有的页面都可以由多个组件构成，比如导航组件、商品展示组件、购物车组件等等。

在组件化开发中，页面由多个组件构成，那么这么多的组件它们之间自然不会毫无关系，所以在很多文档中用到了父组件 、子组件 等等术语。组件本身就是一个完整的功能模块，组件的内容可以是固定不变的，也可能需要和动态的数据进行绑定，所以这又涉及到组件中数据的传递。

现在我们明白了页面中的一切都可以看做是组件，而且组件可大可小，组件可复杂可简单。 HTML中的众多标签比如a标签或者是button标签等等的都可以看做是一个个的组件，他们提供对应的功能也能够复用，但是对于复杂的页面应用开发来说这样的层级太小，仅仅使用单个标签无法完整的定义更复杂的功能模块，在以前的开发中我们是把多个不同的标签组合在一起实现一个稍微复杂的功能模块。现在很多优秀的前端框架中都采用组件化的组织方式，核心的东西并没有改变。

我们把在框架中(Vue)中使用的组件称为自定义组件（区别于系统为我们提供的标签），这些自定义组件的本质其实就是把众多标签以一定的方式组合在一起形成一个整体被称为"组件"。我认为组件开发方式最核心的东西还是代码（功能）复用，把复杂的应用切割成一个个小的更容易管理的模块。

二、Vue框架中的组件

Vue框架中的组件和大多数框架中的组件也没有太大的差别，下面简单说明Vue框架中组件的相关使用。组件的使用主要有两部分构成

① 组件的注册（指定组件的结构和具体内容等等）

② 组件的使用（在页面中使用）

① 全局注册的组件

全局注册的组件其实是把组件相关的信息写到Vue这个构造函数身上，全局组件在任何Vue实例挂载的标签中都能够使用。

less 复制代码

//第一个参数：注册的全局组件的名称
//第二个参数：描述组件内容、数据等信息的选项对象
Vue.component("my-component",{
          //组件的配置项，包括组件的内容（template） 组件中的数据等...
 })

② 局部注册的组件

局部注册的组件其实是把组件相关的信息写到当前指定的这个Vue实例对象(由全局的Vue构造函数创建得到)身上，局部注册的组件只在当前的这个Vue实例对象挂载的标签中能够使用，有使用范围的限制。

csharp 复制代码

var app2 = new Vue({
          el:"#TEST-TWO",
          components:{
              "my-component-two":{
                  //在app2实例对象中注册的局部组件，组件名称为my-component-two
                  //组件的内容为：span标签
              },
              "my-component-three":{
                  //在app2实例对象中注册的局部组件，组件名称为my-component-three
                  //组件的内容为：p标签
              }
          }
      })

③ 组件的具体用法

说明：如果是全局注册的组件那么在页面中所有被挂载到Vue实例对象的标签中均可以使用，局部组件只能在注册的Vue实例，挂载的标签中使用，有使用范围的限制

组件的使用方式 :在页面中指定位置以标签对的方式表明此处需要用到的是哪个组件。示例：<my-component-global-one></my-component-global-one>

Vue框架中组件的使用示例

html 复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../Vue/vue.min.js"></script>
    
    </head>
    <div id="demo-one">
        <!--全局注册的组件在Vue实例对象挂载的标签中都可以使用-->
        <my-component-global-01></my-component-global-01>
        <my-component-global-02></my-component-global-02>
    </div>
    <hr>
    <div id="demo-two">
        <!--全局注册的组件在Vue实例对象挂载的标签中都可以使用-->
        <my-component-global-01></my-component-global-01>
        <my-component-global-02></my-component-global-02>
    </div>
    <hr>
    <div id="demo-three">
        <my-component-part-01></my-component-part-01>
        <my-component-part-02></my-component-part-02>
    </div>
    
    <body>
    <script>
        //A 全局注册的组件
        Vue.component("my-component-global-01",{
            //组件的选项对象
            template:"<div>我是全局注册的组件 组件名称为my-component-global-01</div>"
        });
    
        Vue.component("my-component-global-02",{
            //组件的选项对象
            template:"<div>我是全局注册的组件 组件名称为my-component-global-02</div>"
        });
        
        //B 局部注册的组件
        //创建Vue实例化对象
        var app1 = new Vue({
            el:"#demo-one"
        });
    
        var app2 = new Vue({
            el:"#demo-two"
        });
    
        var app3 = new Vue({
            el:"#demo-three",
            components:{
                "my-component-part-01":{
                    //组件的选项对象
                    template:"<div>局部注册的组件 组件名称为my-component-part-01</div>"
                },
                "my-component-part-02":{
                    //组件的选项对象
                    template:"<div>局部注册的组件 组件名称为my-component-part-02</div>"
                }
            }
        })
    </script>
    </body>
    </html>

说明：在设置组件的template内容的时候更常见的用法是，把其vaue值设置为一个选择器，指向模板中的内容（模板可以通过Vue中的template标签或者是script标签来实现）。

三、父子组件

组件和组件之间可以是包含的关系，如果某个组件中包含另外一个组件，那该组件被称为父组件 ，被包含的组件相对来说则是子组件。

下面通过代码简单介绍父子组件的结构，父子组件还有一个很重要的数据传递问题，即父子组件的通信。

html 复制代码

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../../Vue/vue.min.js"></script>
   </head>
   <body>
   <div id="demoID">
       <parent></parent>
       <child-three></child-three>
   
       <!--<child-one></child-one>  因为组件是在parent父组件中注册的，所以此处不能直接使用-->
   </div>
   
   <script>
       //创建两个子组件构造器（分别为child-one和child-two）
       var childOne = Vue.extend({
           template:"<input type='color'/>"
       });
       var childTwo = Vue.extend({
           template:"<input type='date'/>"
       });
   
       //注册父组件(作为child-one和child-two的父组件)
       Vue.component("parent",{
   
           //在父组件中注册child-one和child-two两个子组件，外界无法直接获取
           components:{
               "child-one":childOne,
               "child-two":childTwo
           },
           template:"<div><child-one></child-one><child-two></child-two></div>"
       });
   
       //在外部注册组件(需要注意位置关系)
       Vue.component("child-three",childTwo);
   
       //创建Vue实例对象并挂载到页面
       var app = new Vue({
           el:"#demoID"
       })
   
   </script>
   </body>
   </html>