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-post
  v-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-post
  v-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-post
  v-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>',

      })