vue组件通信-父组件传数据给子组件
父组件传数据给子组件(prop)
子组件代码示例:
查看代码
<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的优先级高于data
// props: ['name', 'age', 'sex']//简单声明接收----------------------->常见
//接收同时对数据类型进行限制
/*props: {
name: String,
age: Number,
sex: String
}*/
//收同时对数据类型进行限制+默认值指定+必要性限制
props: {
name: {
type: String,//name的类型是字符串
required: ture//name是必须的
},
name: {
type: Number,//
default: 99//如果没传值,默认是99
},
}
}
</script>
<style>
</style>
父组件代码示例:
查看代码
<template>
<div id="root">
<Student v-bind:name='lisi'
:sex='man'
:age='18'></Student>
</div>
</template>
<script>
import Student from './components/Student'
export default {
name: 'App',
components: { Student },
}
</script>
原理