Vue之props 配置详解

在这里插入图片描述

<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>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!

以上是 Vue之props 配置详解 的全部内容, 来源链接: utcz.com/p/240141.html

回到顶部