Vue2将任意命名变量作为道具传递

Posted 2023-02-22

【中文标题】Vue2将任意命名变量作为道具传递

【英文标题】：Vue2 passing arbitrary named variable as prop

【发布时间】：2018-11-24 05:03:42

【问题描述】：

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

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

据我了解，props 是一种允许将数据传递给组件的方式，正如它在网站上所说的那样：

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

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

所以我想在 vue outside 定义一个函数或对象，例如在应用程序中，并将此函数或对象传递给我的 vue 实例。

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

现在，如果我按照 Vue 警告的建议进行操作，并将对象 / 函数命名为与 prop 相同的名称，那么警告会切换到我的数据未在 vue 中定义，并通过阅读确保它是反应性的：https://vuejs.org/v2/guide/components-props.html

说实话，这并没有真正解释如何解决问题，

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

我可以做到（仍然给出相同的警告），但是根据我对 Vue 的理解，有点违背了拥有道具的目的。

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

例如

<script>
export default 
  props: 
    // records: 
    //   default: function()return,
    //   type: Object
    // 
  ,
  data: function() 
    return 
      records:  // define even an empty value in data for it to be 'reactive'
    
  ,
  computed: 
    fields: function() 

    ,
    keys: function() 
      return Object.keys(this.records)
    
  ,
  methods: 

  

</script>

尝试将其用作组件并将记录设置为var myRecords = "a": 失败：

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

那么我应该如何确切地规避这个？那我应该在哪里定义我的数据呢？多实例的情况下如何命名？

在类似问题上可以找到更成熟的示例：

Vue2: passing function as prop triggers warning that prop is already set

【问题讨论】：

你现在在哪里定义你的数据？

@ippi 目前我只是在 vue 实例之前的 html 正文中的脚本标记中定义它。但是，可以想象它会以 XMLHttpRequest 或类似的响应的形式出现

那么，因为例如 <component :data="x:1"></component> 确实可以工作，而且这看起来像一个组件，我假设您需要将数据传递给父级（也可以有道具）和然后再次将其传递给 props 中的组件。

@ippi，我不确定我是否跟随。几天前我开始使用 Vue。这个组件，是根

【参考方案1】：

所以我想在 vue 之外定义一个函数或对象，例如在应用程序中，并将这个函数或对象传递给我的 vue 实例。

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

您的整个 Vue 应用程序应该包含一个根 Vue 实例（您使用 new Vue(...) 对其进行实例化，然后每个组件都在根组件的模板和这些组件的模板中呈现，等等。

查看以下模板：

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

myRecords 必须是模板包含上述内容的 Vue 组件实例上的属性。它可以在data 块中声明，或者作为computed 属性，或者prop，都没有关系。

这是一个小例子：

<div id="app">
  <my-comp :records="myRecords"></my-comp>
</div>

// Obtain records in some way and store it in a global variable
var records = ...

// This is the root Vue instance
new Vue(
  el: '#app',
  data: 
    // You must store the records array in the Vue component like this
    // for it to be referenced within the template.
    // You can optionally transform the data first if you want.
    myRecords: records.filter(r => r.name.startsWith('Bob'))
    // ^        ^
    // |        |
    // |        +--- the global variable
    // |
    // +---- the name of the property on the component instance
  
)

注意MyComp 组件不会以任何方式访问records 全局变量，它只通过records 属性获取其输入。

【讨论】：

首先非常感谢您的详细回答。我通过汇总使用单个文件组件。我想我的困惑在于不理解如何最好地使用在单个文件组件中定义的组件。但是，是否可以使用全局变量？您解决问题的方法有效，但这意味着如果我想要具有不同数据的同一个应用程序，也许还有其他一些不同的结构，我必须更改更多代码。

我不确定您需要在哪里更改大量代码。您至少不需要更改任何MyComp 的代码，因为它不访问任何全局变量。使用全局变量通常会导致难以维护和推理数据来源的意大利面条式代码，这就是为什么通常不这样使用全局变量的原因。对于小型应用程序来说没问题。

是的，内部没有全局变量。我的意思是，假设我想要三个实例，使用来自 3 个不同 api 的数据。在 html 中定义 vue 标签和 vue 组件的文件，然后在其他地方为这些实例中的每一个异步调用 api 是否更清洁（我真的不知道）？基本上，我不想动态创建新的 vue 实例，因为即使没有提供数据，也会呈现 html。我也不想将 vue 实例作为参数传递给任何需要将数据作为道具传递的函数。

你是如何使用这个 API 的？它是您可以完全在客户端通过 XMLHttpRequest/fetch 请求的 REST API，还是在服务器端呈现 HTML 页面？如果是前者，最好的方法是为您的应用程序创建一个文件组件，该组件从 API（可能在 created 挂钩中）获取数据并将结果存储在自身上，然后通过 props 将其提供给其他组件像往常一样。

它们是 REST API，但数据可能需要一段时间，因此我希望它是异步的……我想当我到达那里时我会越过那座桥。您的回答足以让我制作所需组件的原型。如果他们有其他想法，我会稍作回答，让其他人加入。为所有帮助 +1 :)