如何将道具从父组件添加到子组件的子组件

Posted 2023-02-23

【中文标题】如何将道具从父组件添加到子组件的子组件

【英文标题】：How to add props from parent component to child component of child component

【发布时间】：2019-12-01 21:34:39

【问题描述】：

我必须将 props 从父组件传递到子组件的子组件。请帮忙，因为我是 Vue.js 的新手

 parent component --> child component --> child component

我从跟随页面和连接页面的不同组件的成员目录组件调用 rolodex，但我需要知道它是从哪里调用的 rolodex 组件？这样我就可以在 rolodex 组件中显示，例如“从 调用的 rolodex” 我从多个组件调用<Rolodex>。

<Follow Component>---><member directory>---><rolodex>,<search-results>

<Connections component>--><member directory>---><rolodex>,<search-results>

【参考方案1】：

使用 EventBus，在 main.js 文件所在的根目录中创建一个 js 文件，我将其命名为 event-bus.js 并添加以下内容：

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

然后在您需要的任何组件中导入您的 EventBus：

import EventBus from '@/event-bus'

这样发送：

 let data = 'data'
 EventBus.$emit('test', data)

这样接收：

EventBus.$on('test', (data) => 
   console.log(data)
)

这更深入地解释了它：https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1

【参考方案2】：

你有几个选择。

道具

你可以只传递道具，一次一个组件。每个组件将相关值传递给需要它们的子级。这应该是您的默认选项，但它存在一些问题：

如果有多个级别，可能会变得乏味。 在许多情况下，中间组件实际上并不关心它们传递的道具。 如果子/孙中的数据发生更改，您最终会产生类似乏味的事件链，这些事件链会被发送回数据源。

提供/注入

另一种选择是provide/inject：

https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injectionhttps://vuejs.org/v2/api/#provide-inject

这通常被认为是一项高级功能，使用它有几个注意事项。但是，它确实允许组件将“远程道具”传递给后代，跳过中间的任何组件，而他们对此一无所知。

如果数据更改需要传回源，它可能会变得很棘手，因为provide/inject 只在一个方向上真正起作用。如果数据作为引用类型传递，则可以直接在后代中对其进行修改，尽管这将被视为违反单向数据流。理论上可以通过provide/inject 传递一个回调函数来代替事件。这一切都变得有点混乱。

Vuex

当数据需要在组件树中跳转时，标准的解决方案是 Vuex 存储：

https://vuex.vuejs.org/

我不会详细介绍 Vuex，其他地方已经写了很多关于它的文章，但关键思想是数据存储在单例中，可以从应用程序的任何位置访问。

在这个问题的上下文中，问题可能是上下文。如果您同时显示多个rolodex 实例，它们将在商店中查看相同的状态。它一次只对单个实例有效，由祖先设置状态，后代读取它。