22-自定義全局組件

在用vue構(gòu)建項(xiàng)目的過程中,我們有時(shí)會用到別人開發(fā)的組件如vue-router;使用他人組件的正常步驟如下:
1、命令行進(jìn)行安裝,執(zhí)行install;
2、在vue項(xiàng)目中的入口文件main.js中,進(jìn)行導(dǎo)入;
3、然后用Vue.use(plugin)引入該組件。

自定義組件具體步驟如下:
1、在components文件中創(chuàng)建一個(gè)文件,如:date;
2、在date文件中,創(chuàng)建index.js和Date.vue;
3、Date.vue中的代碼如下:

<template>
  <div>
    <div>2019年7月14日</div>
  </div>
</template>
<script>
export default{
  data () {
    return {
      msg: 'hello vue'
    }
  },
}
</script>

4、date文件夾下的index.js中的代碼如下:

import Date1 from "./Date.vue";
const Dates = {
    install(Vue) {//必須有install,vue是new Vue構(gòu)造函數(shù)
        Vue.component("Date", Date1) 
        //Date是你組件的名稱<Date></Date> Date1是你引入的時(shí)候命名的
    }
}
export default Dates

5、入口文件main.js進(jìn)行相關(guān)的配置:

import Date from './components/date'  //引入文件夾名字默認(rèn)是引入index.js
Vue.use(Date)

6、如此這般,就可以在其它組件中正常使用,如下:

<template>
  <div class="hello">
      <Date></Date>
  </div>
</template>

自定義組件Date的內(nèi)容("2019年7月14日")將會展示出來。

注:date文件指的是自定義組件文件夾;index.js指的是組件的入口加載文件;Date.vue指的是組件模板

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 響應(yīng)式布局的理解 響應(yīng)式開發(fā)目的是一套代碼可以在多種終端運(yùn)行,適應(yīng)不同屏幕的大小,其原理是運(yùn)用媒體查詢,在不同屏幕...
    懶貓_6500閱讀 857評論 0 0
  • UI組件 element - 餓了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的組件庫...
    卞卞村長L閱讀 1,877評論 0 8
  • Vue是現(xiàn)在最流行的前端框架之一,而且相對于其他兩個(gè)框架React和Angular來說也更加易學(xué),而且它的作者是國...
    樂百川閱讀 3,542評論 0 9
  • Vue是現(xiàn)在最流行的前端框架之一,而且相對于其他兩個(gè)框架React和Angular來說也更加易學(xué),而且它的作者是國...
    dinel閱讀 5,035評論 0 9
  • 利息 行動(dòng)中蘊(yùn)含時(shí)間偏好。對于同質(zhì)同量的某種物品,現(xiàn)在作為手段的評價(jià)高于未來作為手段的評價(jià)。時(shí)間偏好產(chǎn)生原始...
    人的行動(dòng)閱讀 918評論 0 0

友情鏈接更多精彩內(nèi)容