Javascript Vue2将任意命名变量作为prop传递

我是Vue的新手，在检查文档后，我不知道如何实现以下目标：

• 将任意命名的变量作为道具传递给组件实例

据我理解，道具是一种允许将数据传递到组件的方式，正如网站上所述：

使用道具将数据传递给子组件： 道具是可以在组件上注册的自定义属性。将值传递给prop属性时，它将成为该组件实例上的属性

由于道具可能是

必需的

，因此我们似乎可以在假设某些数据存在的情况下设计组件，并且在某些参数内是可能的（如果指定了验证器选项）

因此，我希望在vue之外（例如在应用程序中）定义一个函数或对象，并将此函数或对象传递给我的vue实例

如果我的命名函数对象与我试图绑定它的道具具有完全相同的名称，则此操作有效。但是，由于我可能有多个Vue组件实例，并且我可能希望绑定不同的数据，因此我发现对变量使用相同的名称并不理想

现在，如果我按照Vue警告的建议操作，并将对象/函数命名为与道具相同的名称，则警告将切换为我的数据未在Vue中定义，并通过读取以下内容来确保它是被动的：

老实说，这并不能真正解释如何解决这个问题

或者将道具移动到数据级别

我可以这样做（仍然给出同样的警告），但这有点违背了我对Vue的理解中使用道具的目的

对于匿名vue实例，这会变得更加令人沮丧

e、 g

那么，我到底应该如何避免这种情况呢？那么我应该在哪里定义我的数据呢？在多个实例的情况下，我应该如何处理命名

类似问题中有一个更成熟的例子：

因此，我希望在vue之外（例如在应用程序中）定义一个函数或对象，并将此函数或对象传递给我的vue实例

很难给出明确的答案，因为我不知道您是如何组织代码的。你在用网页包吗？单文件组件（.vue）？如果对其中任何一个都是肯定的，那么您就不必按照您在问题中描述的方式使用全局变量

您的整个Vue应用程序应该包含一个根Vue实例（您使用

新Vue（…）

实例化该实例），然后在根组件的模板中呈现每个组件，以及这些组件的模板，依此类推

查看以下模板：

<my-comp :records="myRecords"/>

//以某种方式获取记录并将其存储在全局变量中
变量记录=。。。
//这是根Vue实例
新Vue({
el:“#应用程序”，
数据：{
//必须像这样将记录数组存储在Vue组件中
//以便在模板中引用它。
//如果需要，可以选择先转换数据。
myRecords:records.filter（r=>r.name.startsWith（'Bob'））
// ^        ^
// |        |
//|+---全局变量
// |
//+----组件实例上属性的名称
}
})

---

请注意，

MyComp

组件不会以任何方式访问

records

全局变量，它只通过

records

prop获取其输入。

现在在哪里定义数据？@ippi目前我只是在vue实例之前的html主体中的脚本标记中定义它。但是，可以想象它将作为XMLHttpRequest或类似的东西的响应，因为例如

实际上可以工作，而且这看起来像一个组件，所以我假设您需要将数据传递给父级（也可以有道具）然后再次将其传递给props中的组件。@ippi，我不确定我是否遵循了。我几天前开始使用Vue。此组件是最重要的组件。非常感谢您提供的详细答案。我通过汇总使用单文件组件。我想我的困惑在于不理解如何最好地使用在应用程序中定义的组件单文件组件。但是，是否可以使用全局变量？您解决问题的方法是可行的，但这意味着如果我希望同一个应用程序具有不同的数据，或者其他不同的结构，我必须更改更多的代码。我不确定您必须更改大量代码的确切位置。您不需要更改任何f

MyComp

的代码至少是这样的，因为它不访问任何全局变量。使用全局变量通常会导致难以维护的意大利面代码，并对数据源进行推理，这就是为什么全局变量通常不这样使用的原因。对于小型应用程序来说，这没关系。是的，内部没有全局变量。我的意思是，假设我想要三个实例，使用来自3个不同API的数据。是否更干净（我真的不知道）要在html和vue组件的文件中定义vue标记，然后在别处为每个实例调用异步API？基本上，我不想动态创建新的vue实例，因为即使没有提供数据，也会呈现html。我也不想将vue实例作为参数传递给wha任何函数都需要将数据作为道具传入。您如何使用此API？它是一个可以完全在客户端通过XMLHttpRequest/fetch请求的REST API，还是HTML页面在服务器端呈现？如果是前者，最好的方法是为您的应用程序创建一个从API获取数据的单一文件组件（可能在

创建的

钩子中）并将结果存储在自身上，然后像往常一样通过道具将结果馈送到其他组件。它们是REST API，但数据可能需要一段时间，因此我希望它是异步的…我想当我到达那里时，我会跨越这座桥。Y

<my-comp :records="myRecords"/>

<my-comp :records="myRecords"/>