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

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

1、第一步，利用vue-cli創(chuàng)建一個(gè)vue前端項(xiàng)目，文件夾如下圖

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

3、第三步，給子組件header.vue命名一個(gè)全局的id，export default {

name: 'HomeHeader'

}

代碼如下圖

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

HomeHeader 對(duì)應(yīng)上一步的命名；

首先引入界面import HomeHeader from './pages/header'

然后渲染界面export default {

name: 'home',

components: {

HomeHeader

}

}

5、第五步，進(jìn)過(guò)引入界面和渲染界面后，可以在home.vue調(diào)用header.vue界面了，

對(duì)應(yīng)HomeHeader大寫變小寫，連接處用-鏈接

如下圖

6、第六步，運(yùn)行項(xiàng)目，打開網(wǎng)頁(yè)顯示，子組件引入成功，如下圖

更多web前端開發(fā)知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ！！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。