大致效果圖

其中上方文頭部導(dǎo)航，左邊為菜單選項(xiàng)，中間為index頁面。

進(jìn)行組件化

新建目錄如下，新建文件如下

其中分為兩個文件夾，一個為views文件夾，一個為components文件夾，一個存放相關(guān)文件頁面信息，一個存放相關(guān)的組件信息。

創(chuàng)建相關(guān)的url

創(chuàng)建相關(guān)的頁面url 在router目錄下新建相關(guān)的文件， 代碼如下

 {
    path: '/index',
    name: 'index',
    component: () => import('../views/Index')
  },

?

index頁面組件信息

index頁面相關(guān)代碼文件如下

其中把三個組件進(jìn)行相關(guān)的注冊，注冊到頁面中。這三個組件分別為BoxHeader，BoxIndex，Menum文件，對這三個文件進(jìn)行相關(guān)的注冊。

?

頭部文件

進(jìn)入頭部文件，這里對頭部文件進(jìn)行代碼，書寫，代碼如下

?

菜單文件

菜單文件代碼如下。并添加相關(guān)的事件綁定，確保能夠菜單伸縮。

上方使用的是Element Ui 框架實(shí)現(xiàn)

?

主頁文件

這里主頁文件為幾個簡單的主頁文件。一個為示例，一個為主頁，代碼分別如下

?

進(jìn)行事件綁定

這里由于跨兩個組件，所以進(jìn)行事件綁定，當(dāng)子組件觸發(fā)事件以后，先調(diào)用子組件的方法，再通過相關(guān)參數(shù)，調(diào)用父組件的方法，通過調(diào)用父組件的方法，實(shí)現(xiàn)更改父組件頁面的值。

具體流程如下

父組件創(chuàng)建相關(guān)方法，并綁定事件

創(chuàng)建相關(guān)方法

 methods: {
            changeData(){
                console.log(444444);
                this.cur = 1;
            }
        }

綁定相關(guān)事件

子組件創(chuàng)建相關(guān)方法并調(diào)用

ming(){
        console.log("3333");
        this.$emit("callFather");
      }

子組件創(chuàng)建相關(guān)方法并完成方法綁定

   
          保險(xiǎn)產(chǎn)品查詢
        

子組件全部代碼如下

父組件全部代碼如下

完成效果圖

前

后

有道無術(shù)，術(shù)可成；有術(shù)無道，止于術(shù)

歡迎大家關(guān)注Java之道公眾號

好文章，我在看??