關於vue 自定義元件的寫法與用法

2022-06-26 17:27:12 字數 1160 閱讀 3767

在網上經常看到有朋友在問自己能不能寫vue元件 如果可以怎麼應用到自己的專案之中呢!我覺得吧這個事兒就和用煮大公尺飯是乙個道理的

1. 首先作大公尺飯我們得有公尺吧 要不 巧婦難為無公尺之炊啊  因此先買好我們自己的大公尺也就是建立元件檔案,這裡我假設要建立乙個自己loading效果元件 那麼我們就先建立 loading.vue 裡面的**根據vue template相關規則寫就可以 這裡就不在贅述了 我只寫乙個最最簡單的例子 

2.ok了 公尺就這麼愉快的買好了 那麼有了公尺我們現在只需要把他放在鍋裡!那麼這個鍋是誰呢!好吧我們自己來背這個鍋,我們建立乙個相關的.js檔案 通常元件都是乙個功能自己乙個資料夾那麼每個元件都應該有自己獨立的呼叫檔案(一盆大公尺乙個鍋)那麼為了統一我們可以都叫做index.js當然了這個名字你可以隨便起 只有以後你在後續呼叫時候更換相關名字即可!重點來了 這個鍋是怎麼造的呢!話不多說直接上圖

那麼上面三個這麼違和的框是幹什麼的麼:紅色框框:我靠這還用問嗎  你呼叫那個檔案你得告訴人間啊 這裡當然要呼叫剛才我們自己建立的loading.vue檔案。  黃色框框:我靠這個黃色的框框可以說是本次本文章中重點中的重點 為什麼這麼說呢 我們要使用自己的元件就要匯出這個元件 而這個黃色框框中的**就是匯出自己元件的相應配置  其中那個非常猥瑣的浪線則是本例子的」命根子「 這個命名就是你在其他檔案中呼叫這個元件(這裡是loading元件)的名字 在這個例子中我們在呼叫元件時候就可以寫成。白色框框:這個沒什麼好說的 相當於匯出這個元件 在main中好接受!

3.原材料大公尺也有了 飯鍋也有了 現在是萬事俱備只欠東風 那我們第三部就是乙個字」煮「 兩字:」**「 這裡就是我們要把我們這個自己建立的元件應用到我們的頁面之中 詳情請看下圖

黃色框框部分就是在主檔案main.js中 引入剛才定義的元件 和 應用 這個元件了!

最後的最後你可以在任何想用這個元件的地方插入了 元件相應的樣式和js**可以直接寫在第一步中的檔案之中!就這樣乙個自己建立的元件就這麼愉快的應用啦!

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...

vue 元件自定義

基於iview的自定義table元件 一 業務要求 1.展示列表字段資訊.2.列表資料的增刪查改 與 匯出 3.列表的分頁功能 二 元件 實現 html ref table data arrlist columns currcolumns loading loading no data text 暫...