vue2点击两个标签栏的标签,获取列表并传参,怎么传参使两个标签内容不一样
时间: 2024-02-15 22:02:00 浏览: 122
您可以在两个标签栏对应的组件中设置不同的参数来获取不同的列表内容。具体来说,您可以在点击标签栏时,将对应标签的参数传递给组件,然后在组件内根据参数来获取不同的列表内容。
例如,假设您有两个标签栏分别为“标签1”和“标签2”,对应的组件分别为“组件1”和“组件2”,您可以在点击“标签1”时,将参数设置为“1”,在点击“标签2”时,将参数设置为“2”,然后在“组件1”和“组件2”中分别根据参数来获取不同的列表内容。
以下是示例代码:
```
// 标签栏组件
<template>
<div>
<div @click="handleClick(1)">标签1</div>
<div @click="handleClick(2)">标签2</div>
</div>
</template>
<script>
export default {
methods: {
handleClick(tab) {
this.$emit('change', tab)
}
}
}
</script>
// 组件1
<template>
<div>
<ul>
<li v-for="item in list1">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
tab: {
type: Number,
default: 1
}
},
data() {
return {
list1: ['列表1-1', '列表1-2', '列表1-3']
}
},
watch: {
tab(val) {
if (val === 1) {
this.getList1()
}
}
},
methods: {
getList1() {
// 根据参数获取列表1的内容
}
}
}
</script>
// 组件2
<template>
<div>
<ul>
<li v-for="item in list2">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
tab: {
type: Number,
default: 1
}
},
data() {
return {
list2: ['列表2-1', '列表2-2', '列表2-3']
}
},
watch: {
tab(val) {
if (val === 2) {
this.getList2()
}
}
},
methods: {
getList2() {
// 根据参数获取列表2的内容
}
}
}
</script>
```
在上述代码中,标签栏组件通过`handleClick`方法将点击的标签对应的参数传递给父组件,父组件再将参数传递给组件1和组件2。组件1和组件2根据参数的不同来获取不同的列表内容,并更新视图显示不同的列表。
阅读全文