第四章 VUE组件创建和使用（1）

在以前前端开发中，如果不使用动态语言，在很多html代码中，我们想需要复用相关的公用模块的时候，我们都会在每个html中复制进行的，如一般的网站页眉，头部和底部模块都是相同的。现在我们使用vue的时候，我们只需要将这些公共的模块放到一个组件里，在其它地方引用即可，这就是组件的可复用性，同时也说明了VUE和以前的前端开发方式有明显的不同之处。
我们先看下组件的创建和引用过程：

一般在创建简单的VUE项目的时候，在src目录下如果没有components这个文件夹的，我们一般在开发过程中，在这里新建一个components这样的文件夹，（components名字翻译过来即组件，这里的名称我们一般都是约定俗成的命名，你也可以命名其他的，但没有那样的必要）。在components中，我们会创建很多的组件。在这里，我新建了一个Index.vue 的首页，这个组件包含了Header.vue和Footer.vue两个组件；也就是说，组件可以嵌套包含其他组件，也就是父组件和子组件的关系。
组件的页面格式需要遵从vue的相关规范，如下创建的最简单的头部组件(Header.vue)：

<template>
  <div>
    头部组件
  </div>
</template>


<script>

</script>

<style>
</style>

在 节点里，必须有一个而且只能有一个根节点如

或者其他根节点。是用来写组件的相关数据，方法等脚本的地方， 用来写相关的组件样式表。
这是一个最简单的组件。那我们创建好了这个组件，在其他地方，比如首页Index.vue中，怎么引用这个组件呢?我们来看下Index.vue中的代码部分：

<template>
  <div>
    <v-head></v-head>
  </div>
</template>

<script>
    import Header from '@/components/header.vue'
    export default {
        data(){
          return {
          }
        },
        components:{
          'v-head' : Header
        }
    }

</script>

<style>
</style>

其实我买创建的Index.vue页面，它自己也是个组件，不过这里它相对于Header.vue来说，是父组件，Header.vue是子组件。
如果我们把Header.vue这个组件引用进来，我们需要使用 import 组件名称 from 组件路径 这种方式，将组件先引用进来；
如 import Header from ‘@/components/header.vue’； 然后在export default中，需要创建个components 的这样对象，里面给这个Header组件自定义组件标签，如v-head , 这样我们就可以在里，使用v-head 的标签，就把Header.vue里的内容渲染到首页中了。