大致效果图

其中上方文头部导航，左边为菜单选项，中间为index页面。

进行组件化

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

其中分为两个文件夹，一个为views文件夹，一个为components文件夹，一个存放相关文件页面信息，一个存放相关的组件信息。

创建相关的url

创建相关的页面url 在router目录下新建相关的文件， 代码如下

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

 

index页面组件信息

index页面相关代码文件如下

其中把三个组件进行相关的注册，注册到页面中。这三个组件分别为BoxHeader，BoxIndex，Menum文件，对这三个文件进行相关的注册。

 

头部文件

进入头部文件，这里对头部文件进行代码，书写，代码如下

 

菜单文件

菜单文件代码如下。并添加相关的事件绑定，确保能够菜单伸缩。

上方使用的是Element Ui 框架实现

 

主页文件

这里主页文件为几个简单的主页文件。一个为示例，一个为主页，代码分别如下

 

进行事件绑定

这里由于跨两个组件，所以进行事件绑定，当子组件触发事件以后，先调用子组件的方法，再通过相关参数，调用父组件的方法，通过调用父组件的方法，实现更改父组件页面的值。

具体流程如下

父组件创建相关方法，并绑定事件

创建相关方法

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

绑定相关事件

子组件创建相关方法并调用

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

子组件创建相关方法并完成方法绑定

   
          保险产品查询
        

子组件全部代码如下

父组件全部代码如下

完成效果图

前

后

有道无术，术可成；有术无道，止于术

欢迎大家关注Java之道公众号

好文章，我在看❤️