javascript - Vue2 传递任意命名变量作为 prop

Question

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

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

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

Passing Data to Child Components with Props:Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.

由于 props 可能是必需的，因此我们似乎可以在假设存在一些数据并且可能在某些参数范围内(如果指定了验证器选项)的情况下设计组件。

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

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

现在，如果我按照 Vue 警告的建议进行操作，并将对象/函数命名为与 prop 相同，则警告会切换到我的数据未在 vue 内部定义，并通过读取以下内容来确保它是 react 性的:https://v2.vuejs.org/v2/guide/components-props.html

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

或将 prop 移至数据级别。

我可以这样做(仍然给出相同的警告)，但是根据我对 Vue 的理解，有点违背了拥有 props 的目的。

对于匿名 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

So I would like to define a function or object outside of vue, e.g. in an application, and pass this function or object to my vue instance.

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

您的整个 Vue 应用程序应包含一个根 Vue 实例(您使用 new Vue(...) 实例化该实例，并且从那里每个组件都在根组件的模板中呈现，并且模板这些组件的组成等等。

查看以下模板:

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

myRecords 必须是其模板包含上述内容的 Vue 组件实例的属性。它可以在 data block 中声明，或者作为 compulated 属性或 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 属性获取输入。