Question

我必须将道具从父组件传递到子组件的子组件。由于我是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>

Answer 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

Answer 2

您有一些选择。

道具

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

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

提供/注入

另一种选择是provide / inject：

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

这通常被认为是高级功能，使用它时有一些警告。但是，它确实允许组件将“远程道具”传递给后代，从而跳过它们之间的任何组件，而他们对此一无所知。

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

Vuex

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

https://vuex.vuejs.org/

关于Vuex的细节我不会赘述，其他地方也写过很多，但是关键思想是数据存储在一个单例中，可从应用程序中的任何位置访问。

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

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

2 个答案:

道具

提供/注入

Vuex