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

Question

我是 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

Answer 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 属性获取其输入。