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

Question

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

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

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

这是子组件接收 Prop 的方式:

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 数组，以便将对象和两个字符串放入我的子组件中？？？

我知道我可以简单地做这个 props:[ 'activity', 'geocodelink', 'apikey' ]，但是，出于其他一些代码逻辑，我需要将 'activity' 保留为 bool 类型，那么如何我能做到吗？

Answer 1

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

你的 Prop 应该是这样的。

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