Vue入门（六）——组件化开发

组件，其实就是一个拥有HTML结构、CSS样式、JS逻辑以及动画的综合块。前端组件化也确实让很多大的前端团队更加高效地开发前端项目。

而作为目前前端比较流行的框架之一，Vue的组件化也做的非常彻底，尤其是具备特色的单文件组件的开发方式更是为开发者提供了便利。不仅如此，关于Vue的第三方工具支持也非常丰富，社区非常活跃，因此，关于Vue的第三方组件也呈井喷之势。

Vue提供了一个全局的API——Vue.extend()，Vue.extend()可以帮助我们对Vue的实例进行扩展，扩展之后，就可以用扩展对象创建新的Vue实例了。这种方法有点类似于继承。

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

data选项是特例，需要注意的是，在Vue.extend()中，data必须是一个函数。

下面是官方文档中的一个例子：





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

结果如下：

Walter White aaa Heisenberg

再来一个例子：

 


  
  Vue入门之extend全局方法

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

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

{string} id 组件的名字，可以当HTML标签用，注意组件的名字都是小写，而且最好有横线和字母组合。

{Function | Object} [definition] 组件的设置。

注册组件，传入一个扩展过的构造器：
Vue.component('my-component'，Vue.extend({...}))

注册组件，传入一个选项对象（自动调用Vue.extend）
Vue.component('my-component'，{...})

获取注册的组件（始终返回构造器）
var myComponent = Vue.component('my-component')

一个简单的demo：

下面，我们注册一个组件，帮我自动生成label和radio、button的组合。

 


  
  Vue入门之全局组件

注意：

全局注册组件是使用了全局API：Vue.component()，而有时候，我们需要注册一个供自己用的局部模块，就可以用以下的方式：

var Child = {
  template: 'A custom component!'
}
new Vue({
  // ...
  components: {
    //  将只在父模板可用
    'my-component': Child
  }
})

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

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

比如下面的例子：

 


  
  Vue入门之slot
  


  
    
    
      这里是父容器写入的
    

    
    {{ email }}

最终结果：


  
    这里是子组件
    
    这里是父容器写入的
  

  
    这里是子组件
    
 [email protected]
  

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

上面定义组件的方式，一定让你感觉很不爽，尤其是模板的定义，而且样式怎么处理也没有很好的规则。

为了解决这一问题，Vue提供了通过Webpack等第三方工具实现单文件的开发的方式。当然这里会牵扯到很多ES6的语法、第三方工具实现前端模块化等很多知识。

先来体会一下：

单文件书写组件的方式必须配合webpack之类的工具才行，所以这里先不展开了，童鞋们可以先自行学习webpack的知识。

下一篇，会探讨Vue路由，敬请期待。

这里是子组件