时间戳

首页 > 解决方案 > 如何将道具从父组件添加到子组件的子组件

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

问题描述

我必须将道具从父组件传递给子组件的子组件。请帮忙，因为我是 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>

标签： javascriptvue.jsvue-component

解决方案

你有几个选择。

道具

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

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

提供/注入

另一种选择是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显示多个实例，它们将在商店中查看相同的状态。它一次只对一个实例真正有效，祖先设置状态，后代读取它。

推荐阅读