文章目录
前言
props的用法
一、props属性
组件与组件之间不是完全独立的,而是有交集的,组件与组件之间可以传递数据,通过props属性可以让子组件接收父组件传递过来的数据
二、使用步骤
1、定义两个组件
(1)Parent组件:
<template>
<h3>{{ message }}</h3>
<Child /> //3、显示Child组件内容
</template>
<script>
import Child from './Child.vue'; //1、导入Child组件
export default {
data() {
return {
message: "Parent"
}
},
components: { Child } //2、注入Child组件
}
</script>
(2)Child组件:
<template>
<h3>Child</h3>
</template>
<script>
export default{
data(){
return{
}
}
}
</script>
2、在App.vue中引入Parent组件
<template>
<Parent />
</template>
<script>
import Parent from './components/Parent.vue';
export default {
components: {
Parent
}
}
</script>
形成三级层级关系(App–Parent–Child),运行结果如下:
3.使用props属性将父组件的值传递给子组件
(1)在父组件显示子组件内容中添加想要传递的值,这里是title和Data(名字自定义)
<template>
<h3>{{ message }}</h3>
<Child title="Parent数据" Data="传递的值没有数量限制"/>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: "Parent"
}
},
components: { Child }
}
</script>
(2)在子组件中通过props获取父组件的title和Data值
<template>
<h3>Child</h3>
<p>{{ title }}</p> //在页面显示父组件传过来的值
<p>{{ Data }}</p> //在页面显示父组件传过来的值
</template>
<script>
export default{
data(){
return{
}
},
props:["title","Data"]
}
</script>
如图所示
当然这里也可以实现数据的动态传递,对想要传递的数据进行v-bind绑定,在Parent组件里面更改为如下代码
<template>
<h3>{{ message }}</h3>
<Child :title="title" :Data="data"/>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: "Parent",
title:"Parent数据",
data:"传递的值没有数量限制"
}
},
components: { Child }
}
</script>
可以获得一样的效果
三、props传递多种数据类型的值
在上面我们传递的数值都是字符串类型的,下面我们对Number、Array、obj类型数据进行传递
1、Number、Array、obj
(1)在Parent组件中声明一个整数、数组、对象,然后进行v-bind数据绑定
<template>
<h3>{{ message }}</h3>
<Child :title="title" :Data="data" :number="number" :array="array" :Obj="obj"/>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: "Parent",
title:"Parent数据",
data:"传递的值没有数量限制",
number:20,
array:["name","age","Tel"],
obj:{
name:"vue",
age:20,
Tel:"110"
}
}
},
components: { Child }
}
</script>
(2)在子组件中通过props属性接收父组件传递过来的值
<template>
<h3>Child</h3>
<p>{{ title }}</p>
<p>{{ Data }}</p>
<p>{{ number }}</p>
<ul>
<li v-for="(item,index) of array" :key="index">{{ item }}</li>
</ul>
<p>{{ Obj.name }}</p>
<p>{{ Obj.age }}</p>
<p>{{ Obj.Tel }}</p>
</template>
<script>
export default{
data(){
return{
}
},
props:["title","Data","number","array","Obj"]
}
</script>
运行结果如下
四、数据类型校验
1、数据校验
在父组件中声明一个字符串类型title
<template>
<h3>{{ message }}</h3>
<Child :title="title" />
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: "Parent",
title:"Parent数据"
}
},
components: { Child }
}
</script>
在子组件中通过props对接收的数据类型进行校验
<template>
<h3>Child</h3>
<p>{{ title }}</p>
</template>
<script>
export default{
data(){
return{
}
},
props:{
title:{
type:String //期望接收一个为String类型的数据
}
}
}
</script>
如果将String类型改为Number类型或其他类型,在控制台你将会得到警告,如下图所示
其他数据类型也可以做校验,方法一样,这里就不做演示了
2、默认值
在Parent组件中不传title值
<template>
<h3>{{ message }}</h3>
<Child /> //不传title值
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: "Parent",
title:"Parent数据"
}
},
components: { Child }
}
</script>
在子组件中设置default默认值
<template>
<h3>Child</h3>
<p>{{ title }}</p>
</template>
<script>
export default{
data(){
return{
}
},
props:{
title:{
type:String,
default:"这是默认值" //默认值
}
}
}
</script>
运行结果如下
注意事项:数字和字符串可以直接default,而数组和对象,必须通过工厂函数返回默认值
array:{ type:Array, default(){ return ["靓仔点个赞再走"] } }
不能直接default: [“靓仔点个赞再走”]
3、必选项
props:{
title:{
type:String,
required:true //必选项
},
加入required:true,表示必须要给子组件传递一个字符串类型的title值,如果在父组件中不对其进行绑定传值,控制台将会有警告,如下图所示
4、props接收的数据是不能被修改的
定义一个button按钮,实现一个点击事件,点击按钮在控制台打印父组件传过来的title值
<template>
<h3>Child</h3>
<p>{{ title }}</p>
<p v-for="(item,index) of array" :key="index">{{ item }}</p>
<button @click="updateHandle">修改数据</button>
</template>
<script>
export default{
data(){
return{
}
},
props:{
title:{
type:String,
required:true
},
array:{
type:Array,
default(){
return ["靓仔点个赞再走"]
}
}
},
methods:{
updateHandle(){
console.log(this.title);
}
}
}
</script>
打印成功
但如果你试图在子组件中去修改title值,则会直接飘红
methods:{
updateHandle(){
this.title="新数据" //试图更改title值
}
}
}
总结
在本文中实现了组件的嵌套使用(App–Parent–Child),并通过props属性将父组件的值传递给子组件,任何类型的值都可以作为props的值被传递,另外需要注意的是props传递数据,只能从父级传递到子级,不能反其道而行。
props对数据类型的校验,用type规定父组件传过来的数据类型,如果不相符,控制台会抛出警告;默认值,default,数字和数组可以直接default:数据类型,而数组和对象,必须通过工厂函数返回默认值;必选项,通过required:true,要求父组件传值过来,否则控制台会抛出警告,最后要注意的是props接收的值是只读的,不能进行修改操作。