2017-08-04

Vue2.0最全入坑指南(组件初识篇)

前言

接上一篇入坑指南(配置篇)，我们已经认识了 vue 的基本结构，大的骨架 vue-cli 已经帮我们准备好了，本篇来看看 vue 强大的组件(Component)。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

目录结构整理

以我的个人博客为例，大致可分为三部分组成，页头、内容、页脚。在 vue 里面这三部分都可以写成组件来使用。正常情况下，我们的第一思路就是在 components 内分别新建三个组件，然后在我们的 app.vue 分别引用这三个组件就可以实现一个简单的三栏页面。实际应用的时候为了区分入口页面与实际应用组件的区别，src 下面我们大致可以划分如下：

src
    assets
        ---less
            ---xxx.less
        ---img
            ---xxx.png
        ---js
            ---xxx.js
    components   //可复用组件
        ---common
            ---footer.vue
            ---header.vue
        ---content
            ---index.vue
        ---tags
            ---index.vue
    router
        ---index.js
    views  //页面组件
        ---home.vue
        ---tags.vue
        ---404.vue
        ---xxx.vue
    vuex
        ---actions.js
        ---mutation-types.js
        ---store.js
    App.vue
    main.js

PS：以上目录结构根据各大 github 实际项目综合而来，仅供参考。实际项目中请自行调整目录结构！！！

我的第一个组件 header.vue

下面开始编写我的第一个组件 header.vue，按照上面的目录在 common 下新建 header.vue，代码如下：

<template lang="html">  <!-- 默认为html模版 -->
  <div class="head-box"><!-- 组件模板必须包括一个共同的根元素，因此定义了一个根元素div -->
    <p>{{msg}}</p>
  </div>
</template>

<script>
  export default {
    name:"headTop",
    data(){  //data必须是一个函数
      return{
        msg:'这里是页头'
      }
    }
  }
</script>

<style lang="less" scoped>

</style>

PS:用相同的方法，分别创建 footer.vue,content/index.vue 备用，在这里需要注意的是组件模板必须包括一个共同的根元素，因此定义了一个根元素 div，data 必须是一个函数，参考官网说法，其他相关的 template、script、style 作用这里就不多说了，参考上一篇文章vue 配置篇

组件的使用

上面分别建了三个组件，header.vue,footer.vue,content/index.vue,现在它们是单一的组件模块，需要我们像搭积木一样组装起来发挥它们的作用。在 views 下面新建 home.vue，如下：

<template>
  <div class="home-box">
    <!--组件使用-->
    <head-div></head-div>
    <content-div></content-div>
    <foot-div></foot-div>
  </div>
</template>
<script>
  //导入组件
  import headDiv from '@/components/common/header'
  import footDiv from '@/components/common/footer'
  import contentDiv from '@/components/content'

  export default {
    name:"home",
    data(){
      return{

      }
    },
    components:{  //组件注册
      headDiv,
      footDiv,
      contentDiv
    }
  }
</script>
<style lang="less" scoped>

</style>

PS:组装好了然后运行 cnpm run dev 命令查看效果，不出意外在浏览器就可以看到一个简单的三栏页面。此时一个简单页面就组装完成了。对于自定义标签名，Vue.js 不强制要求遵循 W3C 规则 (小写，并且包含一个短杠)，尽管遵循这个规则比较好

分离公共组件

在正常使用中，我们的页头、页脚基本是不变的，所以这块可以提取出来，放入 app.vue 做为固定加载。如下：

<template>
  <div id="app">
    <div class="mid-col">
    <!-- <img src="/static/logo.jpg"> -->
    <!-- 加载公共头部信息 -->
    <head-div></head-div>

    <!--  引用静态资源文件 -->
    <router-view></router-view>
    <!--  这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link> -->
    <!-- 加载公共页脚信息 -->
    <foot-div></foot-div>
    </div>
  </div>
</template>

<script>
import headDiv from '@/components/common/header'
import footDiv from '@/components/common/footer'
export default {
  name: 'app',
  data(){
    return{

    }
  },
  components:{
    headDiv,
    footDiv
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  // color: #2c3e50;
  /*margin-top: 60px;*/
  position: relative;
  min-height: 100%;
  height: 100%;
}
</style>