形象的说,这是一个微信发红包,需要发送和缺人收款。同时,在props收到的数据不建议修改。
在app.vue组件里面的student组件中,传入数据如下
<template>
<div>
<student name="张三" age="18"/>
</div>
</template>
<script>
import student from './components/student.vue'
export default {
name: 'App',
data() {
return {
name:'123'
}
},
components: {
student
},
}
</script>
想里面传入名字为(list),值为name的数据
在student.vue里面中,接收数据,里面就包含了name的值
data(){
return{
}
},
//下面代码表示获取到了里面的数据,相当于有了name,age这个值
props:["name","age"]
以上代码块数据简单接收数据
下面是可以限定接收到的数据类型,表示限定收到的数据为String类型
props:{
name:String,
age:Number
}
还有更加严格的写法,如下
props:{
name:{
//表示数据类型
type:String,
//表示必须传递的
required:true
},
age:{
type:Number,
//设置默认值
default:10
}
}