Vue之props

标签：Vue String Student props 默认值 data name

  props配置项

1. 功能：让组件接收外部传过来的数据 2. 传递数据：```<Demo name="xxx"/>``` 3. 接收数据：     1. 第一种方式（只接收）：```props:['name'] ```     2. 第二种方式（限制类型）：```props:{name:String}```     3. 第三种方式（限制类型、限制必要性、指定默认值）：         ```js         props:{          name:{          type:String, //类型          required:true, //必要性          default:'老王' //默认值          }         }         ```     > 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

Student.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:'Student',
        data() {
            console.log(this)
            return {
                msg:'我是一个学生',
                myAge:this.age// 真要修改数据的话，可以在data中再做一个属性，更改data中的数据
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        //简单声明接收
        // props:['name','age','sex'] 

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

 

App.vue

<template>
    <div>
        <!-- 在自定义的props值前面加：表示冒号内部是一个表达式，执行完这个表达式之后再将数据拿到Student组件中
        比如这样写:age="18+1"  结果是age="19" 因为age前有冒号：，所以双引号内部是一个表达式
        这样的话 age="18+1"  结果是age="18+1"  双引号内部就是一个简单的字符串，不是表达式 -->
        <Student name="李四" sex="女" :age="18+1"/>
    </div>
</template>

<script>
    import Student from './components/Student'

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

 

标签：Vue,String,Student,props,默认值,data,name
From： https://www.cnblogs.com/anjingdian/p/17007048.html