MPVue uses the Component

preface

We all know the advantage of MPVUE is that you can use a lot of VUE things, so how to create such a TAB bar component in MPVUE

Child components

Start by creating the child components

The contents are as follows titletab.vue

<template> <div class="tabs"> <ul> <li v-for="(item, index) in tabs" :key="index" :class="activeIndex == index ? 'active':''" @click="reloadQuestion(index)" >{{ item }}</li> </ul> </div> </template> <script> export default { props: ['tabs','activeIndex'], created() { console.log(this.tabs) }, methods: ReloadQuestion (index) {this.$emit(" return query ",index); }, } } </script> <style> .tabs { width: 100%; background: #f54353; font-size: 24rpx; height: 80rpx; } .tabs ul li { width: 33%; display: inline-block; text-align: center; line-height: 80rpx; color: #fff; border-bottom: 4rpx solid #f54353; } .tabs ul li.active { border-bottom: 4rpx solid #f9e98a; } </style>

reference

In the place that I quoted, introduce

index.vue

<template bb0 <div class="container"> <titletab :tabs="tabs" :activeIndex="activeIndex" @reloadQuestion="getQuestionList"></titletab> </template> <script> import titletab from ".. /.. /components/titletab"; Export default {data() {return {tabs: [], ActiveIndex: 0, QuestionList: []}; }, components: {titletab}, methods: {// Async getQuestionList(type = 0) {var that = this; that.activeIndex = type; let res = await this.$post("question", { type: that.activeIndex }); that.questionlist = res.data; ,}}}; </script>

done