Vue中Props

Props：

• Props是你可以在组件上注册一些自定义的attribute；

• 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；

Props有两种常见的用法：

• 方式一：字符串数组，数组中的字符串就是attribute的名称；

• 方式二：对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等；

Props的数组用法

Person.vue

<template>
    <!--组件的结构-->
    <p>姓名:{{name}}</p>
    <p>年龄:{{age}}</p>
</template>
<script>
   //组件交互相关的js代码
   export default{
            name:'Person',
            props:["name","age"],
            data(){
                return {
                }
            },
   }
</script>

<style>
   /*组件的样式 */
   p{
    color:red;
   }
</style>

App.vue

<template>
  <div>
      <Person name="张三" age="21"/>
      <hr/>
      <Person name="李四" age="20"/>
  </div>
</template>

<script>
import Person from './components/Person.vue'
export default {
  name:'App',
  data() {
      return {
          
      };
  },
  components:{
      Person,
  },
};
</script>

<style lang="scss" scoped>

</style>

效果:  

Props的对象用法

数组用法中我们只能说明传入的attribute的名称，并不能对其进行任何形式的限制，接下来我们来看一下对象的写法是如何让我们的props变得更加完善的。

当使用对象语法的时候，我们可以对传入的内容限制更多：

• 比如指定传入的attribute的类型

• 比如指定传入的attribute是否是必传的

• 比如指定没有传入时，attribute的默认值

 props:{
     name:{
         type:String,
         required:true,
         default:'无名氏'
     },
      age:{
            type:Number,
            required:true,
         },
},

 那么type的类型都可以是:String 、Number 、Boolean 、Array 、Object 、Date 、Function 、Symbol。

Prop 名字格式

        如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。