首頁 > web前端 > js教程 > 主體

Vue.js劃分元件的實作方法介紹

黄舟
發布: 2017-10-30 09:41:43
原創
1864 人瀏覽過

常見的一些頁面,大家坐在一起敲程式碼就可以了,做完這個頁面再做別的頁面,但是作為一個功能複雜的系統,尤其是使用一些適合模組化開發的框架,這樣會顯得效率很低,那麼我們就單純的看在Vue裡面如何劃分組件的。

總結下來有兩種可以劃分,兩種劃分的方法一種是頁面上的功能塊,select,pagenation,和一些需要大量程式碼去實現的一些部分,我們可以把它提取出來放在一起或分類。還有一種根據頁面區域來劃分,header,footer,sidebar,有了元件之後Vue的元件是怎麼實現的?

Vue的元件是怎麼實現的?先來看看在檔案系統裡面是什麼樣的

APP.vue是專案的一個入口,而我們分好的元件也是一個對象,在APP.vue裡面,我們把各個元件用import 導入,header指的是右邊的header.vue文件,這個寫法是es6的一個寫法,當然如果不用不用es6組件化,也得用其他的一些requires來寫,進行一個打包處理,如果只是把這兩個元件引入到app.vue 裡面,在頁面中還是現實不了這兩個元件的。

在Vue裡面必須透過components來註冊這個元件,把引入進來的  放入,然後在模板層級再來寫

,在渲染之後,模板層面會變成header.vue和footer.vue裡面的內容,有一點要注意,Vue必須要去註冊才可以使用

##介紹一下Vue元件之間的通信,秉持了一個概念,必須先要註冊,header.vue檔案裡面的程式碼,假設我們裡面有個data是username,然後方法是dothis,我們看到有一個

屬性props,註冊了一個msg,當我們的app.vue調用了header這個組件的時候,我們可以直接在header屬性裡面寫msg,並且把app.vue裡面任何的數據東西傳到header.vue裡面,所有的都由Vue的機制去實現,如果header.vue這裡沒有寫msg的話,是取得不到屬性的。

總結#

以上是Vue.js劃分元件的實作方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板