组件传递数据——props（父传子）

最新推荐文章于 2025-03-17 19:06:50 发布

乌秋

最新推荐文章于 2025-03-17 19:06:50 发布

阅读量6.7k

点赞数 11

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46372993/article/details/132077189

版权

文章目录

前言
一、props属性
二、使用步骤
三、props传递多种数据类型的值
- 1、Number、Array、obj
四、数据类型校验
总结

前言

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接收的值是只读的，不能进行修改操作。