?

最近在網(wǎng)上看到很多大神都有寫博客的習(xí)慣，堅(jiān)持寫博客不但可以為自己的平時(shí)的學(xué)習(xí)做好記錄積累 無意之中也學(xué)還能幫助到一些其他的朋友所以今天我也注冊(cè)一個(gè)賬號(hào)記錄一下學(xué)習(xí)的點(diǎn)滴！當(dāng)然本人能力實(shí)在有限寫出的文章可能和大神們不能比擬 如果有什么不專業(yè)甚至是錯(cuò)誤的地方還請(qǐng)大家指正！好了說了這么多那么下面進(jìn)入正題^_^

在網(wǎng)上經(jīng)常看到有朋友在問自己能不能寫vue組件 如果可以怎么應(yīng)用到自己的項(xiàng)目之中呢！我覺得吧這個(gè)事兒就和用煮大米飯是一個(gè)道理的

1. 首先作大米飯我們得有米吧 要不 巧婦難為無米之炊啊 ?因此先買好我們自己的大米也就是創(chuàng)建組件文件，這里我假設(shè)要?jiǎng)?chuàng)建一個(gè)自己loading效果組件 那么我們就先創(chuàng)建 loading.vue 里面的代碼根據(jù)vue template相關(guān)規(guī)則寫就可以 這里就不在贅述了 我只寫一個(gè)最最簡單的例子?

2.ok了 米就這么愉快的買好了 那么有了米我們現(xiàn)在只需要把他放在鍋里！那么這個(gè)鍋是誰呢！好吧我們自己來背這個(gè)鍋，我們創(chuàng)建一個(gè)相關(guān)的.js文件 通常組件都是一個(gè)功能自己一個(gè)文件夾那么每個(gè)組件都應(yīng)該有自己獨(dú)立的調(diào)用文件（一盆大米一個(gè)鍋）那么為了統(tǒng)一我們可以都叫做index.js當(dāng)然了這個(gè)名字你可以隨便起 只有以后你在后續(xù)調(diào)用時(shí)候更換相關(guān)名字即可！重點(diǎn)來了 這個(gè)鍋是怎么造的呢！話不多說直接上圖

那么上面三個(gè)這么違和的框是干什么的么：紅色框框：我靠這還用問嗎 ?你調(diào)用那個(gè)文件你得告訴人間啊 這里當(dāng)然要調(diào)用剛才我們自己創(chuàng)建的loading.vue文件。 ?黃色框框：我靠這個(gè)黃色的框框可以說是本次本文章中重點(diǎn)中的重點(diǎn) 為什么這么說呢 我們要使用自己的組件就要導(dǎo)出這個(gè)組件 而這個(gè)黃色框框中的代碼就是導(dǎo)出自己組件的相應(yīng)配置 ?其中那個(gè)非常猥瑣的浪線則是本例子的”命根子“ 這個(gè)命名就是你在其他文件中調(diào)用這個(gè)組件（這里是loading組件）的名字 在這個(gè)例子中我們?cè)谡{(diào)用組件時(shí)候就可以寫成<Loading></Loading>。白色框框：這個(gè)沒什么好說的 相當(dāng)于導(dǎo)出這個(gè)組件 在main中好接受！

3.原材料大米也有了 飯鍋也有了 現(xiàn)在是萬事俱備只欠東風(fēng) 那我們第三部就是一個(gè)字”煮“ 兩字：”開火“ 這里就是我們要把我們這個(gè)自己創(chuàng)建的組件應(yīng)用到我們的頁面之中 詳情請(qǐng)看下圖

黃色框框部分就是在主文件main.js中 引入剛才定義的組件 和 應(yīng)用 這個(gè)組件了！

?

最后的最后你可以在任何想用這個(gè)組件的地方插入<Loading></Loading>了 組件相應(yīng)的樣式和js代碼可以直接寫在第一步中的文件之中！就這樣一個(gè)自己創(chuàng)建的組件就這么愉快的應(yīng)用啦！

轉(zhuǎn)載于:https://www.cnblogs.com/blueball/p/10489903.html

總結(jié)

以上是生活随笔為你收集整理的vue 自己写组件。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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