Question

我是Vue的新手，在查看了文档后，我无法弄清楚如何实现以下目标：

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

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

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

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

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

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

现在，如果我按照Vue警告建议，并且命名对象/功能与prop相同，则警告切换到我的数据未在vue内定义，并通过读取确保它是被动的：{{3 }}

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

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

我能做什么（仍然给出相同的警告），但是有点挫败了我对Vue的理解而拥有道具的目的。

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

e.g。

<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"/>

那么我应该如何完全来规避这个？那么我应该在哪里定义我的数据？如何在多个实例的情况下处理命名？

在一个类似的问题上找到了一个更成熟的例子：

https://vuejs.org/v2/guide/components-props.html

Answer 1

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

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

您的整个Vue应用程序应该包含一个根Vue实例（您使用new Vue(...)进行实例化，并且从那里每个组件都在根组件的模板中呈现，以及这些组件的模板，依此类推。 / p>

查看以下模板：

<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道具输入。

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

1 个答案: