为什么会出现此“无效道具：期望的数组，有字符串”错误？

Question

在子组件中，我希望有一个数组道具：

setTimeout(changeHeaderImg, time);

在父组件中，我定义了一个对象数组：

export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}

..并以这种方式调用子组件：

data () {
  return {
    listItems: [
      {
        text: 'blabla'
      },
      {
        text: 'blibli'
      }
    ]
  }
}

但是Vue抱怨listItems是一个字符串。怎么可能是字符串？

Answer 1

使用<custom-list items="listItems" />只是传递一个静态字符串。 您必须将其更改为v-bind:items或简写为:items才能将数组传递给组件。前面的v-bind冒号用来告诉vue，所传递的值是JavaScript表达式或字符串以外的数据类型。

例如： <custom-list :items="listItems" />或<custom-list v-bind:items="listItems" />