vue之props
参考官网api :https://cn.vuejs.org/v2/api/#props
作用:父组件通过props传递数据给子组件,子组件用过event给父组件传递消息,props允许是对象或数组,其中对象允许配置高级选项,如类型检测、自定义验证和设置默认值,具体如下:
type
可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。Prop 类型的更多信息在此。
default: any
为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required: Boolean
定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。
validator: Function
自定义验证函数会将该 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>