vue 父類組件如何引入子組件

組件的位置是從componnets開始找起的

 

 

 

前端框架vue，在利用腳手架工具vue-cli創建前端項目時候，怎麼引入組件呢？下面是詳細的寫法。

1、第一步，利用vue-cli創建一個vue前端項目，文件夾如下圖

2、第二步，例子是在hom.vue界面引入子組件header.vue，如下圖

3、第三步，給子組件header.vue命名一個全局的id，

1 2 3 4 5

export default {    name: 'HomeHeader'   }

 

代碼如下圖

4、第四步，返回home.vue組件，引用header.vue組件代碼如下圖

HomeHeader 對應上一步的命名；

首先引入界面

import HomeHeader from './pages/header'

然後渲染界面

export default {

name: 'home',

components: {

HomeHeader

}

}

5、第五步，進過引入界面和渲染界面後，可以在home.vue調用header.vue界面了，

<home-header></home-header>

對應HomeHeader大寫變小寫，連接處用-鏈接

如下圖

6、第六步，運行項目，打開網頁顯示，子組件引入成功，如下圖