props配置项

本文主要是介绍props配置项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

src/App.vue:

<template><div><Student name="JOJO" sex="男酮" :age="20" /></div>
</template><script>import Student from './components/Student.vue'export default {name:'App',components: { Student },}
</script>

src/components/Student.vue:

<template><div><h1>{{msg}}</h1><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><h2>学生年龄：{{age}}</h2>     </div>
</template><script>export default {name:'Student',data() {return {msg:"我是一名来自枝江大学的男酮，嘿嘿，我的金轮~~",}},// 简单声明接收// props:['name','age','sex']// 接收的同时对数据进行类型限制/* props:{name:String,age:Number,sex:String} */// 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性props:{name:{type:String,required:true,},age:{type:Number,default:99},sex:{type:String,required:true}}}
</script>

总结：

props配置项：

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

传递数据：

接收数据：

第一种方式（只接收）：props:[‘name’]

第二种方式（限制数据类型）：props:{name:String}

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

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

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

这篇关于props配置项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---