参考官网api ：https://cn.vuejs.org/v2/api/#props
可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。
<html> <head> <meta charset="utf-8"> <title>Vue 的props</title> </head> <body> <div id="app"> //如果你要直接传递数字、布尔值、数组、对象，而且不使用 v-bind ，传递的仅 //仅是字符串， <my-component message="[1,2,3]"></my-component> <my-component :message="[1,2,3]"></my-component> <my-component :message="helllo"></my-component> <div>{{helllo}}</div> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> /* var data = { counter: 0 } */ Vue.component('my-component', { props: ['message'], template: '<div>{{message.length}}</div>', /* template: '<button @click="counter++">{{counter}}</button>', */ data: function() { /* return data; */ return { counter: 0 } } }) var app = new Vue({ el: '#app', data:{ helllo:[1,2,5,3] } }) </script> </body> </html>