这个需求是在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里获取这两个参数:
这个
methods:{
getIcon(iconType,ifIcon){
this.IconType = iconType;
this.IfIcon = ifIcon;
}
}
这样终于获得了IconType和IfIcon两个参数的值,然后就会在页面上显示出来了。整个功能的实现花了大约一天的时间,我的难点在于对a-icon属性的操作,和从子组件传参进父组件的写法,写出来之后就觉得没那么复杂,而且十分开心~
如有问题,欢迎提出。