需求
一个展示学生信息的组件
Student.vue:
<template>
<!-- 组件的结构,相当于非单文件中的 template配置-->
<div class="demo">
<h2>名字:{
{name}}</h2>
<h2>年龄:{
{ age }}</h2>
</div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
name:'StudentVue',
data() {
return {
name: "yang",
age: 18,
};
},
}
</script>
<style>
/* 组建的样式 */
.demo{
background: green;
}
</style>
APP.VUE:
<template>
<div>
<Student/>
</div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {
name: 'App',
components: {
Student
},
data() {
return {
msg:"欢迎！！！"
}
},
}
</script>
<style>
</style>
输出：
需求：学生页面的数据是动态传入的，而不是写死的——引入props配置
props配置
App.vue传入数据的时候通标签的属性传入，
Student.vue中通过 props配置进行引入。
props配置简单接收——数组形式
props: ['属性名','属性名']
app.vue;
<template>
<div>
<Student name='张三' age="20"/>
</div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {
name: 'App',
components: {
Student
},
data() {
return {
msg:"欢迎！！！"
}
},
}
</script>
<style>
</style>
student.vue
<template>
<!-- 组件的结构,相当于非单文件中的 template配置-->
<div class="demo">
<h2>名字:{
{name}}</h2>
<h2>年龄:{
{ age }}</h2>
</div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
name:'StudentVue',
props: ['name','age']
}
</script>
<style>
/* 组建的样式 */
.demo{
background: green;
}
</style>
props配置接收——对象形式
可以对接收参数的数据格式进行限制：
props: {
name: String,
age:Number
}
props配置接收——对象形式2
可以对接收参数的数据格式进行限制，同时可以限制属性是否是必需的，也可以设置默认值
props: {
name: {
type: String,
required:true,
},
age: {
type: Number,
default:99
},
}
props配置分析
- 通过props配置接受的属性最终配置在组建的实例对象上（vc）
- 传入数据的时候通标签的属性传入,即
属性="值"，所以默认情况下传过去的属性值都是字符串，如果想要传过去number值，可以靠v-bind实现
<Student name='张三' :age="20"/>
:age="20"会将 "20"解析成js表达式，表达式的结果就是number类型的20，所以传过去的值就是number类型的18. - propos可以对传入的属性值的类型进行限制
- propos传过来的属性不能修改
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
若要修改props传过来的属性，需要这样写：
<template>
<!-- 组件的结构,相当于非单文件中的 template配置-->
<div class="demo">
<h2>名字:{
{name}}</h2>
<h2>年龄:{
{ myAge }}</h2>
<button @click="addAge">点击年龄修改</button>
</div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
name:'StudentVue',
data() {
console.log(this)
return {
myAge:this.age
}
},
props: {
name: {
type: String,
required:true,
},
age: {
type: Number,
default:99
},
},
methods: {
addAge() {
this.myAge++
}
}
}
</script>
<style>
/* 组建的样式 */
.demo{
background: green;
}
</style>
props的优先级
props的优先级比较高，高于data(){}配置