uni-app 封装模板，父子组件通讯

封装模板，父子组件通讯

1.创建模板文件,components 下，index下 swiper-tab-head.vue，把首页相关代码复制到swiper-tab-head.vue的template里，css文件也放进去。创建script，把相关用到的比如点击事件相关复制过来

<script>
    export default { 
        props:{
            tabBars:Array,
            tabIndex:Number
        },
        methods:{
            tabtap(index){
                //this.tabIndex = index;
                //子组件传递给父级
                this.$emit('tabtap',index)
            },
        }
    }
</script>

 

2.定义子组件里面props，把需要传递参数的 2个变量设置好

 

 

3.父组件引入子组件vue文件

import swiperTabHead from "@/components/index/swiper-tab-head.vue";

 

  注册数据

 

在父级template 里面 引入数据

 

 @tabtap=‘tabtap’是用来监听的，

 

4. swiper-tab-head.vue，下的 

methods:{
            tabtap(index){
                //this.tabIndex = index;
                //子组件传递给父级
                this.$emit('tabtap',index)
            },
        }

把index 传递过去给