vue 实现父子组件上一条下一条数据切换

可以通过在父组件中维护一个当前数据的索引，然后通过 props 将数据传递给子组件，子组件通过监听 props 的变化来更新显示的数据。在子组件中，可以通过 $emit 触发一个事件，让父组件更新当前数据的索引，从而实现上一条下一条数据的切换。具体实现可以参考 Vue 官方文档中的组件通信章节。

相关问题

vue 实现父子组件上一条下一条数据切换，给个例子

当然可以，以下是一个简单的例子：

父组件：

<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 接收父组件传递的数据并进行渲染。

vue 实现组件中间上一条下一条数据切换

可以使用 props 传递数据，然后在组件内部使用 v-for 循环渲染数据列表，再通过计算属性或者方法获取当前数据的索引，最后在组件中添加上一条和下一条按钮，点击按钮时修改当前数据的索引即可实现切换。具体实现可以参考以下代码：

<template>
<div>
<div>{{ currentData }}</div>
<button @click="prev">上一条</button>
<button @click="next">下一条</button>
</div>
</template>

<script>
export default {
props: {
dataList: {
type: Array,
required: true
}
},
data() {
return {
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>