之前寫過一篇文章，介紹瞭如何安裝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>
 

三、備註

這樣我們就完成了根元件和自定義元件之間的巢狀，如果你想完成兩個自定義元件的巢狀，那麼採用與上面相同的做法即可。