如何理解Vue中的props 配置,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<template> <div class="demo"> <h2>{{ msg}}</h2> <h3>学生姓名:{{name}}</h3> <h3>学生性别:{{sex}}</h3> <h3>学生的年龄:{{myage+1}}</h3> <button @click="changeAge">点我修改数据</button> </div></template><script> export default { name: 'Student', data() { return { msg: '王者爱好者', myage:this.age } }, methods: { changeAge(){ this.myage=24 } }, //简单接收 // props:['name','age','sex'] //接收的同时对数据进行类型的限制 // props:{ // name:String, // age:Number, // sex:String, // }//接收数据的同时对数据:进行类型的限定+默认值的指定+必要性的限制 props: { name: { type: String, //name的类型 required: true, //name是必要的 }, age: { type: Number, default:22 }, sex: { type: String, required: true } } }</script>
<template> <div> <Student name="张三" sex="男" :myage="20"/> </div></template><script> //引入Student组件 import Student from './components/Student.vue' export default { name: 'App', components: { Student } }</script>
看完上述内容,你们掌握如何理解Vue中的props 配置的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!