【06】Vue 之组件化开发-白红宇

【06】Vue 之组件化开发

阅读量：7033 次

发布时间：2019-06-28

本文共 3192 字，大约阅读时间需要 10 分钟。

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

6.1. 全局扩展方法Vue.extend

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

语法：Vue.extend( options )参数：{Object} options用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象[后面会细讲]。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

下面是一个官网demo：


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

结果如下： <p>Walter White aka Heisenberg</p>

综合案例代码：

   
       Vue入门之extend全局方法

6.2. 创建组件和注册组件

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

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

语法： Vue.component( id, [definition] )参数：  {string} id    组件的名字，可以当HTML标签用，注意组件的名字都是小写，而且最好有横线和字母组合。  {Function | Object} [definition]   组件的设置用法：注册或获取全局组件。注册还会自动使用给定的id设置组件的名称// 注册组件，传入一个扩展过的构造器Vue.component('my-component', Vue.extend({ /* ... */ }))// 注册组件，传入一个选项对象（自动调用 Vue.extend）Vue.component('my-component', { /* ... */ })// 获取注册的组件（始终返回构造器）var MyComponent = Vue.component('my-component')

简单demo：


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

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

   
       Vue入门之extend全局方法

注意结果点

组件的名字都必须是小写【】！！！而且建议是小写字母和横线的组合比如： my-radiobtn

注册组件的时候，可以传入一个选项对象进行配置。其中props是设置当前组件的属性，属性也都必须小写。属性是连接父容器和子组件的桥梁。

注意：属性名和组件的名字都要小写啊，不然vue不会认的。

编写组件代码最好配合Vue的chrome插件：

组件可以返还自己的数据，但是必须是函数。data必须是Function

6.3. 局部注册组件

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

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

6.4. 组件的slot

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

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

2.如果子组件没有slot,直接替换父组件

比如下面的例子：

 <   
       Vue入门之extend全局方法    
         
          
            
       这里是父容器写入的
    
          
          
      
       {
    { email }}

最终结果：


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

6.5. 单文件组件的使用方式介绍

通过上面我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue可以通过Webpack等第三方工具实现单文件的开发的方式。当然这里会牵扯到很多es6的语法、第三方工具实现前端模块化等很多知识，我们大概看一眼知道Vue的组件可以直接写一个文件中，其他地方就可以直接导入这个模块了。后面做项目的时候我还会再讲一下怎么用。

单文件书写组件的方式必须要配合webpack之类的工具才行，所以这里暂时不讲解如何做，后面到项目阶段的时候再详细讲解。不过你可以参考：

6.6. 组件总结

Vue的组件化还是做的比较彻底的。不像Angular1.0中的模块那么鸡肋。组件化确实让前端模块化开发更加容易实现， Vue的单文件开发组件的方式也是Vue的一大创新，也发非常好用。

转载地址：http://aicoder.com/vue/preview/all.html#6

转载于:https://www.cnblogs.com/yeziTesting/p/7141298.html

你可能感兴趣的文章