vue.js中如何引入組件-創(chuàng)新互聯(lián)

這篇文章主要介紹了vue.js中如何引入組件，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、豐南網(wǎng)絡(luò)推廣、微信小程序、豐南網(wǎng)絡(luò)營(yíng)銷、豐南企業(yè)策劃、豐南品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供豐南建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

vue.js中引入組件的方法：1、創(chuàng)建自定義組件的文件夾；2、在要添加的頁(yè)中加入要引入的模塊；3、在index.vue中引入模塊；4、在index.vue頁(yè)面引入組件即可。

具體步驟如下：

1、首先在你的項(xiàng)目中專門(mén)創(chuàng)建一個(gè)放置自定義組件的文件夾（我是放在了components底下的common中，本文以table.vue為例）

2、然后在你要添加的頁(yè)中加入要引入的模塊,注意駝峰命名的方式（本文為例：<v-table></v-table>，因?yàn)槲以诙xtable模塊的時(shí)候是定義name：v-table，所以引用的時(shí)候，也必須得用所在table模塊中name定義的名字）；

3、接著在index.vue中引入table.vue模塊

//index.vue 頁(yè)面 ，引入v-table模塊
<div class="table">
    <v-table></v-table> //這就是你引入的自定義模塊；注意是駝峰命名法
</div>

4、在index.vue頁(yè)面引入該組件(注意：table.vue，我是在index.vue頁(yè)面中添加了模塊<v-table>,不是html標(biāo)簽，其實(shí)就是vue引入新的子組件）

//index.vue
<script>
  import vTable from '../../components/common/table'  //table.vue（注意，我在index.vue頁(yè)面中添加了模塊<v-table>,不是html標(biāo)簽，其實(shí)就是vue引入新的子組件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>

提示：說(shuō)白了，自定義組件就好比封裝，把一些公共的模塊抽取出來(lái)，然后寫(xiě)成單獨(dú)的的工具組件或者頁(yè)面，在需要的頁(yè)面中就直接引入即可。

另外，為了防止在同一頁(yè)面寫(xiě)入過(guò)多的代碼，不方便后期維護(hù)，便可以把整個(gè)頁(yè)面分成多個(gè)小模塊，然后在主頁(yè)面進(jìn)行模塊引入，創(chuàng)建包括引入步驟都是一樣的。

比如：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue.js中如何引入組件內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

標(biāo)題名稱：vue.js中如何引入組件-創(chuàng)新互聯(lián)
本文來(lái)源：http://muchs.cn/article22/dejgcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、軟件開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、企業(yè)建站、小程序開(kāi)發(fā)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)