Vue.js：访问另一个组件中数组的数据

问题描述

我有一个组件可以在其中截取视频的屏幕截图。它们存储在数组中，并显示在画布中视频下方的组件中。

但是，我要实现的是在另一个组件（gallery.vue）中访问此屏幕截图数组，并在其中显示所有屏幕截图。因此，点击屏幕快照按钮后，相应的屏幕截图应显示在其他组件中。

这是我的Stream.vue组件的外观，其中包含视频和屏幕截图按钮（该组件运行良好）：

<template>
    <div id="app">
        <div>
            <video ref="video" id="video" width="1024" height="576" autoplay></video>
        </div>
        <div>
            <button class="btn btn-dark btn-lg" style="margin-top: 5px; margin-bottom: 7px" id="snap" v-on:click="capture()">
                <i class="fa fa-camera"></i>
            </button>
        </div>
        <canvas ref="canvas" id="canvas" width="640" height="480"></canvas>
        <ul>
            <li v-for="c in captures" :key="c.id">
                <img v-bind:src="c" height="50" />
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "camera",data() {
        return {
            video: {},canvas: {},captures: [],};
    },mounted() {
        this.initVideo();
    },methods: {
        initVideo() {
            this.video = this.$refs.video;
            if (
                "mediaDevices" in navigator &&
                "getUserMedia" in navigator.mediaDevices
            ) {
                navigator.mediaDevices
                    .getUserMedia({video: true})
                    .then((stream) => {
                        const videoPlayer = document.querySelector("video");
                        videoPlayer.srcObject = stream;
                        videoPlayer.play();
                    });
            } else {
                alert("Livestream currently unavailable.");
            }
        },capture() {
            this.canvas = this.$refs.canvas;
            // this.canvas = document.querySelector("canvas");
            // this.canvas = document.getElementById("galleryCanvas");
            var context = this.canvas.getContext("2d");
            context.drawImage(this.video,640,480);
            this.captures.push(this.canvas.toDataURL("image/png"));
        },},};
</script>

实际应访问和显示屏幕截图的gallery组件如下：

<template>
    <div class="gallery" id="mainDiv">
        <canvas ref="canvas" class="galleryCanvas" id="galleryCanvas" width="640" height="480" v-bind:captures="capture"></canvas>
        <ul>
            <li v-for="screenshot in captures" :key="screenshot.id">
                <img v-bind:src="screenshot" height="50" />
            </li>
        </ul>
        <!-- <div class="canvas" id="galleryCanvas"></div> -->
    </div>
</template>

<script>
export default {
    name: "gallery",props: {
        captures: Array,};
</script>

到目前为止，我已经尝试了多种方法。我尝试通过

访问“图库”组件的画布

this.canvas = document.querySelector("canvas");

或通过其ID通过

this.canvas = document.getElementById("galleryCanvas");

但是所有这些都不起作用。它只是在该组件中显示单个屏幕截图，当我单击屏幕截图按钮时，它会覆盖屏幕截图，而不是在旧屏幕截图旁边显示新屏幕截图。

这听起来像是一个相当简单的问题，但我确实为此感到困惑。 我真的很感谢您的帮助。

非常感谢您！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）