vue项目第五天

历史记录组件触发 连带menu组件路由同步

修改菜单 默认激活的路由。

历史记录路由如果当前路由在最后一个位置，删除则自动向前移位。

解决第一个小bug，点击tab高亮之后路由不跳

点击最后一个tab删除，修改了menuid，同步路由跳转

点击删除将tab删空，让导航跳转到系统首页

分析项目路由界面的结构

---

三部分组成

1.form表单
2.table表格数据
3.数据分页

封装form表单组件 （封装一个公共的，谁用谁调用）

---

在components下面创建一个formtab.vue组件，这个组件中是对 elementui的二次封装，然后在页面展示组件的view文件中都可以进行调用

整体思路：

利用的是父传子（这个技术点一定要会用！！！！！）。

方法： 复用组件中props中定义的名字是啥,页面展示组件中的:后面的名字就是啥，然后等于号后面可以接固定的变量，也可以接下方data中传入的动态的值。

利用的是子传父（这个技术点一定要会用！！！！！）。

在写复选框的时候用到了子传父，方法是在复用组件中写一个方法 在上方绑定 @selection-change.

这个是elelmentui中给出的方法触发事件，然后定义一个方法写到下方的methods中，

然后在展示组件中定义一个方法，并且在上方标签中绑定这个方法，起个名字比如 @checkhandler="checkList" 名字叫checkhandler ，

然后在复用组件中，通过官方 给定的api

this.$emit("checkhandler", value); 这个方式就可以达到效果了，这里双引号的名字记得跟展示页面绑定的方法名字一样

至于复选框是否需要隐藏使用props传递来控制的

1.就是先创建公共组件里面写了一些公共的东西，比如input啊，之类的，

2.然后在这个公共组件上写一个局部作用域插槽（作用域插槽插槽就是给具名插槽绑定一个属性，然后在

3.使用它的页面组件中通过name.变量来接收。），

4.通过这个作用域去把不同的页面组件，中的不同的部分，放到这里，

5.然后把这个封装的公共组件，引入到需要用到它的页面组件中使用即可，

6.上方写一些判断条件，比如什么情况下用的是input什么情况下用的是select等等

要利用组件中父传子的方法props传值。

export default {
     // 定义props约束 ，就是父传子的方法，然后在使用封装的组件中去使用，在自定义的form上绑定:model="formInline属性，然后在底下的data中可以建一个集合去放数据，这个集合的名字绑定到model上。
    
    // 对应的是上方第2行中的几个: 后面的值，就是从 elmentui中复制过来的属性在低下↓用传值的方法写
    props: {
      inline: { //这个属性在elelmentui中表示表单布局，ture就是水平，falst是竖直
        type: Boolean,
        default: true, //默认值
      },
      model: {   //这个属性是elementui中的数据源，相当于data中的一个数组，里面都是数据
        type: Array, //对象格式
        required: true, //必填的
      },
    },
    data() {
      //获取props传递的数据
      let { model } = this.$props;
      let formData = {};
      model.forEach((item) => {
        formData[item.key] = "";
      });
      return {
        formItem: formData,
      };
    },

封装组件使用无名和具名插槽可以实现form动态效果

定义该组件的插槽

定义form表单格式数据

---

  formInline: [
        {
          name: "用户名",
          ele: "input",
          key: "name",
        },
        {
          name: "爱好",
          ele: "select",
          key: "hobby",
          options: [
            { value: "1", label: "篮球" },
            { value: "2", label: "足球" },
            { value: "3", label: "羽毛球" },
          ],
        },
      ],

根据格式进行动态渲染

根据form表单数据格式进行form数据整理

最终代码格式

封装的elementui公共组件↓

使用这个公共组件的页面展示组件（这里以use为例子）