Vue cli中点击子组件模块，改变父组件元素 (antd)

这个需求是在vue cli中有个导航栏，其中包含不同的控件，在操作下面子页面的时候，外层的导航栏要相应的变化，改变其中一个控件；

先说父组件里：

		//这个插槽不是必须的 把children换成普通的div也可以的，就不需要children这个子组件了
    
 

整个这个方法里有两个变量需要变化；一个是控制是否显示的IfIcon；一个是控制显示什么的IconType
此处用了一个插槽，不然无法在子组件调用的时候显示其他的控件

在第一个子组件中定义插槽：

这个子组件是没什么用处的 其实我也不明白为啥要写这个子组件……本来是想在这里封装一个a-icon的 但是有点麻烦 后来试了一下 可以直接去掉 根据你的业务逻辑来

回到父组件：关于IfIcon和IconType这两个变量是从页面的子组件传进来的，在子组件中有两个方法，一个是点击step跳到需要显示的页面onchange，一个是滚动到需要显示的页面handleScroll；这两个方法都能获得当前显示页面的索引，当索引为2时我需要在父组件的导航栏中显示出一个a-icon；其他页面的话需要让它不显示

子组件判断索引如下：

if (i == 2) {
 //加一个图标
  this.IconType = "experiment";
  this.IfIcon = true;
} else{
  this.IfIcon = false;
}
this.$emit("TempFunc", this.IconType, this.IfIcon);

下面这个$emit方法，就是把IconType和IfIcon传回到父组件的方法，此处需要一个虚拟方法TempFunc，才能把参数从子组件传到父组件；

传到父组件里之后，父组件需要在TempFunc里获取这两个参数：

这个标签就是子组件，获得getIcon这个方法后在methods中get参数：

methods:{
    getIcon(iconType,ifIcon){
      this.IconType = iconType;
      this.IfIcon = ifIcon;
    }
  }

这样终于获得了IconType和IfIcon两个参数的值，然后就会在页面上显示出来了。整个功能的实现花了大约一天的时间，我的难点在于对a-icon属性的操作，和从子组件传参进父组件的写法，写出来之后就觉得没那么复杂，而且十分开心~
如有问题，欢迎提出。