Vue之props 配置详解
程序员文章站
2022-06-16 21:34:08
{{ msg}}
学生姓名：{{name...
<template>
<div class="demo">
<h1>{{ msg}}</h1>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>学生的年龄：{{myage+1}}</h2>
<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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容！