vue.js劃分元件詳細介紹

這次帶給大家Vue.js如何劃分組件，Vue.js分割組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

常見的一些頁面，大家坐在一起敲程式碼就可以了，做完這個頁面再做別的頁面，但是作為一個功能複雜的系統，尤其是使用一些適合模組化開發的框架，這樣會顯得效率很低，那麼我們就單純的看在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的話，是取得不到屬性的。   

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue全家桶專案實務詳解

#原生JS怎麼非同步請求實作Ajax

#Vuex狀態管理應如何使用

vue2.0在table中全選和反選

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