如何在 vue.js 中组件的 props 数组中混合不同的数据类型？

Question

我正在努力理解如何将几种不同的数据类型作为道具传递给子组件。我有一个对象和两个字符串，我想将它们作为道具从父组件传递给子组件。

这就是我想将 props 从父组件传递到子组件 prov-activity 的方式：

<prov-activity :activity="{{$activity}}" :apikey="     
{{$apikey}}" :geocodelink="
{{$geocodelink}}"></prov-activity>

这是子组件接收道具的方式：

props: [{ 'activity' : Boolean }, 'googlemapsapikey', 'googlemapsgeocodelink']

Activity 是一个对象，而另外两个是作为 props 传递的字符串。

我现在收到的警告信息如下：

[Vue warn]: props must be strings when using array syntax.

似乎活动不再正确传递，因为我也收到此错误：

Property or method "activity" is not defined on the instance but  
referenced during render. Make sure that this property is reactive, either 
in the data option, or for class-based components, by initializing the property

如何正确定义 props 数组，以便将对象和两个字符串放入我的子组件中？？？

我知道我可以简单地执行此道具：[ 'activity', 'geocodelink', 'apikey' ]，但是，出于其他一些代码逻辑，我需要将 'activity' 保留为布尔类型，那么如何我能做到吗？

Answer 1

您需要使用数组语法或对象语法来定义道具，您不能将两者结合使用。在这种情况下，您想使用the object syntax。

你的道具应该是这样的。

props: {
  activity: Boolean,
  googlemapsapikey: String,
  googlemapsgeocodelink: String
}