Vue的props配置项

一、配置项 props

1. 作用

复用组件传参

2. 功能

让组件接收外部传过来的数据

3. 使用

（1）传递数据：

<Demo name="xxx"/>

（2）接收数据：

1）第一种方式（只接收）：

props:['name']

2）第二种方式（限制类型）：

  props:{
      name:String
  }

3）第三种方式（限制类型、限制必要性、指定默认值）

      props:{
          name:{
              type:String,//类型
              required:true,//必要性
              default:'老王'//默认值
          }
      }

备注（重要）

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

二、例

1. main.js

// 引入Vue
import  Vue from 'vue' //残缺版
// 引入App
import App from './App'

// 关闭生产提示
Vue.config.productionTip = false

new Vue({
    el:'#app',
    render:h => h(App)
})

2. App.vue
   name、sex、age是传到子组件的参数。

<template>
    <div>
        <MyStudent name="李四" sex="男" :age="20"/>
    </div>
</template>

<script>
    import MyStudent from './components/MyStudent.vue'

    export default {
        name:'App',
        components:{MyStudent},
    }
</script>

<style>

</style>

3. MyStudent.vue 子组件

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>姓名：{{name}}</h2>
    <h2>性别：{{sex}}</h2>
    <h2>年龄：{{myAge+1}}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
    export default {
      name:'MyStudent',
      data() {
          return {
              msg:'我是一个学生',
              // name:'张三',
              // sex:'男',
              // age:12,
              myAge:this.age
          }
      },
      methods:{
        updateAge(){
          this.myAge++
        }
      },
      //第一种方式
      // props:['name','age','sex']//简单接收

      //第二种方式
      // 接收的同时对数据进行类型限制
      // props:{
      //   name:String,
      //   sex:String,
      //   age:Number
      // }
      
      //第三种方式
      // 接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
      props:{
        name:{
          type:String,//name的类型是字符串
          required:true,//name是必要的
        },
        age:{
          type:Number,
          default:99,//默认值
        },
        sex:{
          type:String,
          required:true
        }
      }
    }
</script>