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>
           

三、備注

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