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: '[e-mail]'            }        }    });    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:'[e-mail]'            }        }    });    //初始化一个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 : '[e-mail]'    }});

最终结果：

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