Vue2——props配置
/组件交互的代码(数据、方法),相当于非单文件中的出了template的配置。//组件交互的代码(数据、方法),相当于非单文件中的出了template的配置。可以对接收参数的数据格式进行限制,同时可以限制属性是否是必需的,也可以设置默认值。//组件交互的代码(数据、方法),相当于非单文件中的出了template的配置。需求学生页面的数据是动态传入的,而不是写死的——引入props配置。App.vu
·
需求
一个展示学生信息的组件
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配置简单接收——数组形式
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(){}
配置
未接收的props
父组件在组件标签中传递属性,子组件使用props接受属性。
父组件:
<div>
<Student name='张三' :age="20"/>
</div>
子组件:
props: ['name','age'],
- 正常情况下由props接收从父组件传递管来的参数,并且将参数放在组件实例对象上。
- 但是如果不接收的话会存储在组件实例对象上的
$attrs属性
上,如果接受了就不会存储在$attrs属性
上了。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献5条内容
所有评论(0)