Vue笔记——组件之间的嵌套

之前写过一篇文章，介绍了如何安装Vue的新旧版本脚手架，同时也介绍了如何使用新旧版本的脚手架快速创建Vue项目，感兴趣的同学可以点击查看：Vue笔记——搭建脚手架并快速创建Vue项目。
今天的这篇文章总结另外一个知识点：在使用脚手架创建的Vue项目中，嵌套不同的组件。

一、基础知识简介

首先对Vue项目给出一个简单的介绍，Vue项目中有index.html文件，当我们启动一个项目的时候，打开的就是这个文件。index.html文件和main.js相关联，所以紧接着就是解析main.js中的内容。

main.js文件是Vue的入口文件，在这里我们可以引入Vue的其他组件，例如有Vue中的vue-router组件、vue-resource组件和App根组件。但是我们自己编写的组件，一般情况下是不会在main.js文件中引入的。

App根组件一个很常用的功能是引入我们编写的组件，即我们编写的组件可以嵌套在App根组件中，这样我们自己编写的组件就可以添加到项目中。

二、组件之间的嵌套

下面我们以自己编写的组件和根组件之间的嵌套为例来讲解，其他组件之间的嵌套方法与这种情况如出一辙。

首先我们在/src/components文件夹下新建一个组件，命名为feng.vue，组件内容如下：

<template>
  <div class="feng">
    <h1>Hello this is {{ user_name }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'feng',
    data() {
      return {
        user_name:"fengzhen"
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .feng {
    color: skyblue;
  }
</style>

组件创建之后，我们首先要在根组件中使用import命令引入该组件，然后在components属性中局部注册组件，最后在<template></template>中调用组件即可。比如我们要在根组件中嵌套feng.vue这个组件，代码如下：

<template>
  <div id="app">
    <!-- 第三步：调用组件 -->
    <vue-feng></vue-feng>
  </div>
</template>

<script>
  import Feng from './components/feng.vue'    // 第一步：引入组件

  export default {
    name: 'App',
    data: function () {
      return {}
    },
    components: {
      "vue-feng": Feng    // 第二步：局部注册组件
    }
  }
</script>

<style>


</style>

三、备注

这样我们就完成了根组件和自定义组件之间的嵌套，如果你想完成两个自定义组件的嵌套，那么采用与上面相同的做法即可。