Vue.js模板中如何正确传递数组而非字符串？

嘿，这个问题我之前开发时也踩过坑！HTML属性默认会把所有值都解析成字符串，所以你直接写data="['tefdfxt', 'Cats']"肯定会被当成字符串处理，这就是为什么你看到typeof(data)输出的是string。下面给你几个实用的解决办法：

方法1：使用v-bind指令（推荐） #

Vue的v-bind指令（可以简写为:）会把属性值当作JavaScript表达式来解析，而不是普通字符串。只需要把你的组件调用改成这样：

<div id="app">
  <step :data="['tefdfxt', 'Cats']"></step>
</div>

这样组件里的data prop就会接收到真正的数组，此时typeof(data)会输出object（因为数组在JavaScript里属于对象类型）。

方法2：绑定Vue实例中的数据 #

如果你的数组是动态生成或者需要复用的，更推荐把数组定义在Vue实例的data选项里，再通过v-bind绑定：

new Vue({
  el: '#app',
  data() {
    return {
      myStepData: ['tefdfxt', 'Cats']
    }
  }
})

然后在HTML中调用组件：

<div id="app">
  <step :data="myStepData"></step>
</div>

这种方式更灵活，适合需要修改数组内容的场景。

额外提示：Prop类型验证 #

为了避免后续出错，你可以给组件的prop加上类型验证，确保传入的是数组：

Vue.component('step', {
  props: {
    data: {
      type: Array,
      default: () => [] // 给一个默认空数组，防止未传值时报错
    }
  },
  template: ` <span> {{data}} {{typeof(data)}}</span> `
})

这样如果不小心传了非数组类型，Vue会在控制台给出警告，方便你排查问题。

内容的提问来源于stack exchange，提问作者Mr Bonjour