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

2017-08-03 本文已影响251人零和幺

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

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

一、全局扩展方法——Vue.extend()

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

语法：Vue.extend(options)
参数：{object} options
用法：

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

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

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

<div id="mount-point"></div>
<script>
// 创建构造器
var Profile = Vue.extend({
  // 新的对象的模板，所有子实例都会拥有此模板
  template: '<p>{{firstName}} {{lastName}} aaa {{alias}}</p>',
  data: function () {   // 创建的Vue实例时，data可以是Object 也可以是Function，但是在扩展
    return {            // 的时候，data必须是一个函数，而且要返回值奥。
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
</script>


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

结果如下：

<p>Walter White aaa Heisenberg</p>

再来一个例子：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之extend全局方法</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
  </div>
  <script>
    var myVue = Vue.extend({
      template: '<div>{{ name }} - {{ age }} - {{ mail }}</div>',
      data: function () {
        return {
          name: 'malun',
          age: '19',
          mail: 'flydragonml@gmail.com'
        };
      }
    });
    var app = new myVue({         
      el: '#app'             
    });
  </script>
</body>
</html>

二、创建组件和注册组件

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

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

语法：Vue.component(id，[definition])；
参数：

{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：

<div id="example">
  <!--组件直接跟普通的标签一样的使用-->
  <my-component></my-component>
</div>
<script>
// 注册一个组件
Vue.component('my-component', {
  // 模板选项设置当前组件，最终输出的html模板。注意：有且只有一个根元素。
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

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

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之全局组件</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <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" v-bind:value="val"></div>';
    // 注册一个全局的组件
    Vue.component('radio-tag', {       // 组件的名字不能有大写字母，跟React的曲别啊。另外组件名最好是小写字母加横线组合。
      template: temp,   
      props: ['rid', 'txt', 'val'],   // 设置组件的属性有哪些，定义标签的属性一致。
      data: function () {             // 注意属性名都得是小写，不然会不认的。
        return {                      // 在组件的定义中data必须是函数，而且必须有返回值。
          age: 19,                    // 此地方的 age 和 email都是演示，并没有用到。
          email: 'flydragonml@gmail.com'
        }
      } 
    });                                

    // 初始化一个Vue实例
    var app = new Vue({         
      el: '#app',               
      data: {                   
        demoId: 'ft',
        demoText: '足球',
        demoVal: 2
      }
    });
  </script>
</body>
</html>

注意：

组件的名字都必须是小写（其实非必须，但最好这样）；
注册组件的时候，可以传入一个选项对象进行配置。其中props是设置当前组件的属性，属性也都必须小写。属性是连接父容器和子组件的桥梁。
组件可以返回自己的数据，但是必须是函数（data必须是function）。

三、局部注册组件

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

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

四、组件的slot

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

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

比如下面的例子：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之slot</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--父容器输入标签-->
    <my-slot>
      <h3>这里是父容器写入的</h3>
    </my-slot>

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

    <!--父容器什么内容都不传-->
    <my-slot></my-slot>
  </div>
  <script>
    // 反引号：可以定义多行字符串。
    var temp = `
      <div>
        <h1>这里是子组件</h1>
        <hr>
        <slot>slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将保留！</slot>
      </div>
    `;
    Vue.component('my-slot', {         
      template: temp,   
    });                    
    // 初始化一个Vue实例
    var app = new Vue({         
      el: '#app',               
      data: {                   
       email: abc@gmail.com'
      }
    });
  </script>
</body>
</html>

最终结果：

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

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

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

五、单文件组件

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

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

先来体会一下：

<template>
  <div>
    <nav class="navbar navbar-dark navbar-fixed-top">
    </nav>
     <div class="col-md-3 sidebar">
      <ul>
        <li v-for="item in list" >
          <router-link :to="{ path: item.url }">{{ item.name }}</router-link>
        </li>
      </ul>
    </div>
    <div class="container-fluid content">
      <router-view></router-view>
    </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';

export default {
  name: 'app',
  components: {
  },
  data: function () {
    return {
      list: []
    }
  },
  mounted: function () {          // 挂载完成后
    this.$nextTick(function () {
      Axios.get('/api/menulist', {
        params: {
        }
      }).then(function (res) {
        this.list = res.data
      }.bind(this))
    })
  }
}
</script>

<style>
ul, li {
  list-style: none;
}
.router-link-active {
  background-color: #f6f6f6;
}

.navbar {
  height: 50px;
  background-color: #303030;
}
.content {
  margin-top: 50px;
  padding-left: 210px;
}

.sidebar {
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
  width: 200px;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}
</style>

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

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