vue 实现父子组件上一条下一条数据切换,给个例子
时间: 2023-05-16 13:06:17 浏览: 149
当然可以,以下是一个简单的例子:
父组件:
```
<template>
<div>
<child-component :data="currentData"></child-component>
<button @click="prev">上一条</button>
<button @click="next">下一条</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
dataList: [
{ id: 1, content: '第一条数据' },
{ id: 2, content: '第二条数据' },
{ id: 3, content: '第三条数据' }
],
currentIndex: 0
}
},
computed: {
currentData() {
return this.dataList[this.currentIndex]
}
},
methods: {
prev() {
if (this.currentIndex > 0) {
this.currentIndex--
}
},
next() {
if (this.currentIndex < this.dataList.length - 1) {
this.currentIndex++
}
}
}
}
</script>
```
子组件:
```
<template>
<div>
<p>{{ data.content }}</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true
}
}
}
</script>
```
在这个例子中,父组件通过维护一个数据列表和当前数据的索引来实现上一条下一条数据的切换,子组件则通过 props 接收父组件传递的数据并进行渲染。
阅读全文