【小程序】mpvue使用component组件

Z时代
2024-01-10
分类：技术分享

前言

我们都知道mpvue的好处是可以用到很多vue的东西，那么如何在mpvue中创建这样的标签栏组件

子组件

先创建子组件
【小程序】mpvue使用component组件

内容如下
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("reloadQuestion",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>

引用

在我引用的的地方,引入

index.vue

//@reloadQuestion接受子组件传来的刷新消息
<template>
<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>