前端框架vue，在利用腳手架工具vue-cli創建前端項目時候，怎么引入組件呢？下面本篇文章給大家介紹一下引入子組件的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

vue.js中怎么引入子組件？

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

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

3、第三步，給子組件header.vue命名一個全局的id，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界面了，

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

如下圖

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

更多web前端開發知識，請查閱 HTML中文網 ！！

總結

以上是生活随笔為你收集整理的js 获取vue组件html_vue.js中怎么引入组件？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。