有没有办法将项目传递给 VueJS 中另一个组件的对话框？答案

【问题标题】：Is there a way to pass an item to a dialog in another component in VueJS?有没有办法将项目传递给 VueJS 中另一个组件的对话框？
【发布时间】：2019-12-13 12:49:56
【问题描述】：

我有一个带有 <v-data-table> 的组件，其中包含不同的项目。在每一行都有一个按钮，用于打开 <v-dialog>，显示有关所选项目的详细信息。我的问题是我不想要一个大组件，而是不同的、更小的组件。所以我的问题是如何将我想在对话框中显示的项目传递给另一个组件中的对话框？

这是我打开对话框的 Vue 代码。

<template v-slot:item.open="{ item }">
                <v-tooltip top>
                    <template v-slot:activator="{ on }">
                        <v-icon size="20px" color="green darken-1" v-on="on" @click="openDialog2(item)">
                            mdi-arrow-expand-all
                        </v-icon>
                    </template>
                    <span>Open</span>
                </v-tooltip>

<v-dialog
                v-if="this.dialog2"
                v-model="fullDialog"
                persistent
                max-width="1200"
        >

以及将项目移交给对话框的 JavaScript 代码（如果对话框和 <v-data-table> 在同一个组件中，则有效）

 openDialog2(item) {
                this.fullDialog = Object.assign({}, item);
                this.dialog2 = true;
            }

感谢任何帮助！非常感谢。

【问题讨论】：

你研究过道具吗？ vuejs.org/v2/guide/components-props.html
只是为了确认item 你的意思是任何JS 属性或值？
@InchHigh 这实际上看起来像我正在寻找的东西，我稍后会查看它。
@SatyamPathak by item 我的意思是中的 :items

标签： javascript vue.js dialog

【解决方案1】：

可能有一种我更喜欢这样做的适当方式。

Vuex 状态管理 (https://vuex.vuejs.org/)

每当我认为data 可以共享给不同的组件时，我相信state 管理是最好的方法。 为什么不支持以及何时使用 vuex - 正如你提到的许多不同的小 components 希望阅读 data 或 manipulate 这样它就不会多余你通过 prop 很深级别或不同的层次结构。了解如何在您的项目中包含 vuex 引用 https://vuex.vuejs.org/guide/。

状态管理是唯一的事实来源，当任何组件想要访问任何状态时都可以简单地读取它，最好的部分是如果任何组件更改状态，所有其他使用相同状态的组件都有反射，因为它绑定到 @ 987654330@ 反应性。

说 state 我指的是 item 你希望传递给组件

【讨论】：