Vue Props是什么

props相当于一个组建的输入，和JS中function(a,b){}中的a和b很像，是一种参数

如图展示

      const foo={props:['title'],template:'<div>局部组件{{title}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo title="this si props"></foo></div>'})

一、props类型

1）字符串数组形式列出的 prop：，写法如下

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

2）还可以使用对象的形式指定每一个prop的类型，在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户，写法如下

props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor
}

还可以这么写

props:{'title':{type:string}}

正确例子如下：

     const foo={props:{'title':{type:Number}},template:'<div>局部组件{{title}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo v-bind:title="2"></foo></div>'})

错误例子如下：

     const foo={props:{'title':{type:Number}},template:'<div>局部组件{{title}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo title="this si props"></foo></div>'})

注意当传的值是数字的时候需要使用v-bind写法或者简写:字段名，否则会给编译为字符串

二、prop“传入”的类型：

1）传入的数据可以是动态的也可以是静态的

prop 可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 -->
<blog-postv-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

2）传入一个数字

使用v-bind告诉vue 42是数字不是字符串

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

3）传入一个布尔值

prop没有值，意味着true

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post><!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

4）传入一个数组

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

5）传入一个对象

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-postv-bind:author="{name: 'Veronica',company: 'Veridian Dynamics'}"
></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

6）传入一个对象所有property

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {id: 1,title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-postv-bind:id="post.id"v-bind:title="post.title"
></blog-post>

三、props的默认值写法

利用default的写上默认值，当没有给prop传参就是执行展示默认值

1）带有默认值的数字

 const foo={props:{'title':{type:Number,default:0,}},template:'<div>局部组件{{title}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo ></foo></div>'})

2）带有默认值的对象

      const foo={props:{'title':{type:Object,default: function () {return { message: 'hello' }},}},template:'<div>局部组件{{title.message}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo ></foo></div>'})

四、自定义函数验证传参

利用validator自定义验证函数当return true时说明传过来的参数通过验证当return false时就没有通过验证控制台会提示警告

写法如下

      const foo={props:{'title':{type:[String, Number,Object],default: function () {return { message: 'hello' }},validator:function(val){return val==='a';}}},template:'<div>局部组件{{title}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo title="a"></foo></div>'})

五、传值一定要写必填

利用required: true实现，如果不写控制台也会报错

     const foo={props:{'title':{type:[String, Number,Object],//传入的参数类型可以是字符串、数字以及对象required:true}},template:'<div>局部组件{{title}}</div>',};const a=new Vue({el:'#app',components:{foo},template:'<div><foo></foo></div>'})

六、prop都是单项数据流，是只读文件不可改写

父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

只读的写法：

     const foo={props:{'title':{type:[String, Number,Object],required:true}},template:'<div>局部组件{{title}}<button @click="read()">读取</button></div>',methods:{read(){console.log(this.title)}}};const a=new Vue({el:'#app',components:{foo},template:'<div><foo title="this is prop"></foo></div>',})