Vue元件 自定義全域性元件

2021-10-23 23:10:07 字數 1483 閱讀 2197

vue兩大核心：

1.資料驅動介面改變

2.元件化

什麼是元件？什麼是元件化？

在前端開發中元件就是把乙個很大的介面拆分成多個小的介面，每乙個小的介面就是乙個元件

將大介面拆分成小介面就是元件化

元件化的好處

1.可以簡化vue例項的**

2.可以提高復用性

如何建立元件（三步）

let profile = vue.


extend()


;<


/script>


//第乙個引數：指定註冊的元件的名稱


//第二個引數：傳入已經建立好的元件構造器


let profile = vue.


extend()


; vue.


component


("abc"


,profile)


;<


/script>


>


<


/abc>


<


/div>


let profile = vue.


extend()


; vue.


component


("abc"


,profile)


;<


/script>
開啟瀏覽器後發現只有img元素顯示出來，p元素內容沒有顯示出來。這裡是因為：在建立元件指定元件的模板的時候，模板只能有乙個根元素。所以我們就把所有的內容放進乙個div裡。

>


<


/abc>


<


/div>


let profile = vue.


extend()


; vue.


component


("abc"


,profile)


;<


/script>
以上自定義全域性元件的方法可以使用，但是在編寫template的時候沒有提示，不利於編寫，我們就來看一下簡化版的方法首先編寫元件的模板

"info"


>


>


描述資訊<


/p>


<


/div>


<


/template>


vue.


component


("abc",)


;<


/script>
然後再直接註冊這個元件，給這個元件起乙個名稱，然後在物件裡面告訴它這個元件對應的模板的id，這樣就完事了。

自定義Vue 全域性元件

在 components 下建立自己的元件 primary click show 儲存 資料提交 visible.sync isok width 500px center footer class dialog footer isok false 取 消 primary click submit 確...

vue學習 自定義全域性vue元件

文件目錄 components loading 元件資料夾 loading.vue loading元件核心 index.js 配置匯出元件,並且install 主要配置到處檔案index.js import loadingcomponent from loading.vue 引用元件檔案 定義並註冊...

Vue 自定義全域性訊息框元件

訊息彈框元件，預設3秒後自動關閉，可設定info success warning error型別 效果圖 檔案目錄 index.js給vue新增 my message方法,判斷引數，使用 mount 給元件手動掛載引數，然後將元件插入頁面中 import vue from vue import me...