20-入门之组件化开发

组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。
前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue 的组件化也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井喷之势。当然学习和使用 Vue 的组件也是我们的最重要的目标。

1. 全局扩展方法Vue.extend
Vue提供了一个全局的API，Vue.extend 可以帮助我们对 Vue 实例进行扩展，扩展完了之后，就可以用此扩展对象创建新的 Vue 实例了。 类似于继承的方式。

语法：Vue.extend( options )

参数：{Object} options

用法：

使用基础 Vue 构造器，创建一个“子类”
参数是一个包含组件选项的对象 

data 选项是特例，需要注意: 在 Vue.extend() 中它必须是函数

下面是一个官网demo：

<div id="mount-point"></div>

<script>

// 创建构造器
var Profile = Vue.extend({

// 新的对象的模板，所有子实例都会拥有此模板

      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',

 // 创建的Vue实例时，data 可以是 Object 也可以是 Function，但是在扩展
       的时候，data必须是一个函数，而且要返回值奥。

      data: function () {   
            return {           
                  firstName: 'Walter',
                  lastName: 'White',
                  alias: 'Heisenberg'
            }
          }
    })
</script>

// 创建 Profile 实例，并挂载到一个元素上。
// .$mount() 方法跟设置 el属性效果是一致的。

new Profile().$mount('#mount-point')



结果如下：

<p>Walter White aka Heisenberg</p>

综合案例代码：

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

<script>
    var myVue = Vue.extend({
        template:"<p> {{name}} - {{age}} - {{mail}}</p>",
        data: function(){
            return {
                name: 'jim',
                age: 19,
                mail: 'guo_dan@aliyun.com'
            }
        }
    });

    var app = new myVue ({
        el: '#app'
    })

</script>

2. 创建组件和注册组件

当然上面的方式只是能让我们继承Vue实例做一些扩展的动作。看Vue中如何创建一个组件并注册使用。

Vue提供了一个全局注册组件的方法：Vue.component

语法： Vue.component( tagName, options)

参数：
  {string} tagName   组件的名字，可以当HTML标签用，注意组件的名字都是小写，而且最好有横线和字母组合。
  {Function | Object} [options]   组件的设置

用法：
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')

组件在注册之后，便可以在父实例的模块中以自定义元素 的形式使用。要确保在初始化根实例之前注册了组件

简单demo：

<div id="example">
        <!--组件和普通的标签一样的使用-->
        <my-component></my-component>
    </div>

<script>

// 注册一个组件
        Vue.component('my-component',{
            // 模板选项设置当前组件，最终输出的html模板。
            // 注意：有且只有一个根元素
            template: '<p>A custom component!</p>'
        })

// 创建根实例
        new Vue({
            el:'#example'
        })
</script>

那么我们注册一个组件自动帮我生成 label和radiobutton组合。

<div id="app">
    <!--组件名可以直接当标签使用-->
    <radio-tag  rid="rBas" txt="篮球" val="1"></radio-tag>

    <!--组件的属性也可以使用Vue的绑定的语法，下面是动态绑定数据给子组件-->
    <radio-tag :rid="demoId" :txt="demoText" :val="demoVal"></radio-tag>
</div>

<script>
    // 定义组件模板，模板有且只有一个根元素
    var temp ="<div><label v-bind:for='rid'>{{ txt }}</label><input :id='rid' type='radio' :value='val'></div>"

    // 注册一个全局的组件
    // 组件的名字不能有大写字母，跟React有区别，另外组件名最好的小写字母加横线组合
    Vue.component('radio-tag',{
        template: temp,

    // 设置组件的属性有哪些，定义标签的属性一致
    // 注意属性名都是小写，不然无法识别     

        props:['rid','txt','val'],
        data: function(){
            return {
                age: 19,
                email:'guo_dan@aliyun.com'
            }
        }
    });

    //初始化一个Vue实例要在注册组件之后
    var app = new Vue({
        el: '#app',
        data: {
             demoId: 'ft',
             demoText: '足球',
             demoVal: 2
        }
    });

    </script>

注意结果点:
+ 组件的名字都必须是小写【其实是非必须，但是为了不麻烦就强制吧】！！！而且建议是小写字母和横线的组合比如： my-radiobtn

+ 注册组件的时候，可以传入一个选项对象进行配置。其中props是设置当前组件的属性，属性也都必须小写。属性是连接父容器和子组件的桥梁。
+ 编写组件代码最好配合 Vue 的 chrome 插件：vue-devtool
+ 组件可以返还自己的数据，但是必须是函数。data必须是Function

3. 局部注册组件
全局注册组件就是使用全局API Vue.componet(id, {….})就行了，当然我们有时候需要注册一个局部模块的自己用的组件。那么就可以用下面的方式了。

var child = {
    template: '<div>A custom component!</div>'
    }

new Vue({
    //...
    components: {
    //<my-component>将只在父模板可用
    'my-component':child
    })

4. 组件的slot
使用组件的时候，经常需要在父组件中为子组件中插入一些标签等。
当然其实可以通过属性等操作，但是比较麻烦，直接写标签还是方便很多。
Vue 提供了 slot 协助子组件对父容器写入的标签进行管理。

当父容器写了额外的内容时， 如果子组件恰好有一个slot标签，那边子容器的slot标签会被父容器写入的内容替换掉。

比如下面的例子：

<div id="app">

<!--父容器输入标签-->
    <my-slot>
        <h3>这里是父容器写入的</h3>
    </my-slot>

<!--父容器绑定数据到子容器的 slot 这里的作用域是父容器的-->
    <my-slot> {{ email }} </my-slot>

<!--父容器什么都不传内容-->
    <my-slot></my-slot>

 </div>

// 反引号：可以定义多行字符串。
var temp = `
    <div>
        <h1>这里是子组件</h1>
        <hr>
        <slot>slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将保留！</slot>
    </div>
    `;

//如果定义的组件为 my-slot，那么用组件的时候<my-slot></my-slot>
Vue.component('my-slot',{
    template: temp,
});

//初始化一个 vue实例
var app = new Vue({
    el: '#app',
    data: {
        email : 'guo_dan@aliyun.com'
    }
});

最终结果：

<div id="app">
  <div>
    <h1>这里是子组件</h1>
    <hr>
    <h3>这里是父容器写入的</h3>
  </div>

  <div>
    <h1>这里是子组件</h1>
    <hr> flydragon@gmail.com
  </div>

  <div>
    <h1>这里是子组件</h1>
    <hr> slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将删除！
  </div>
</div>