Vue props 配置项

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

传递数据：<Demo name="xxx"/>

接收数据：

1. 只接收：props:['name']

2. 限制类型：props:{name:String}

3. 限制类型+必要性+指定默认值：

   props: {
       name: {
           type: String, // 限制类型
           required: true // 是否必要的
           default: '张三' // 默认值
       },
   

---

实例

src 文件结构

|-- src
    |-- App.vue
    |-- main.js
    |-- components
        |-- Student.vue

App.vue

<template>
    <div id="app">
        <Student name="李四" sex="男" :age="18"/>
        <Student name="王五" sex="男" :age="19"/>
    </div>
</template>

<script>
    import Student from "@/components/Student";

    export default {
        name: 'App',
        components: {
            Student
        },
        data() {
            return {}
        }
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

Student.vue

<template>
    <div class="school">
        <h2>{{msg}}</h2>
        <h2>姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
        <h2>年龄：{{age+1}}</h2>
        <hr>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg: '你好',
            }
        },
        // 简单声明接受
        // props: ['name', 'sex', 'age']

        // 接受的同时对数据进行：类型限制
        // props: {
        //     name: String,
        //     sex: String,
        //     age: Number
        // }

        // 接受的同时对数据进行：类型 + 默认值 + 必要性的限制
        props: {
            name: {
                type: String,
                required: true // 是否必要的
            },
            sex: {
                type: String,
                required: true
            },
            age: {
                type: Number,
                default: 99 // 默认值
            }
        }
    }
</script>

---

不建议直接修改props

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

---