javascript - Vue.js 组件数据依赖于其他组件数据

Question

我有一个组件如下。

export default {
    name: "ImagesGallery",
    data () {
        return {
            activeImageIndex: 0,
        };
    },
}

该组件是一个图像库。现在我有另一个组件，我需要在其中引用 activeImageIndex。

<template>
    <div>
        <images-gallery ref="gallery">
    </div>
</template>

export default {
     name: "AnotherComponent",
     components: {
         ImagesGallery,
     },
     data () {
        return {
            imageIndex: null, // I want this to refer to the images gallery index.
        };
     },
}

我想要实现的目标:

我希望其他组件的“imageIndex”是对 ImagesGallery 组件的“activeImageIndex”的引用。如果我修改“imageIndex”，图库索引的值也应该改变。

我尝试在数据函数中分配 imageIndex: this.$refs.gallery.activeImageIndex 但显然它在这种情况下不起作用。

Answer 1

您需要将索引作为 Prop 传递给子组件:

** 家长

<images-gallery :activeImageIndex="imageIndex" ref="gallery">

** child

export default {
    name: "ImagesGallery",
    props: {activeImageIndex: Number} 
}

在子组件中，您可以像以前一样访问activeImageIndex。