Vue组件：使用Prop实现父组件向子组件传递数据

news2024/11/24 4:46:10

1、Prop 基本用法

由于组件实例的作用域是孤立的，因此子组件的模板无法直接应用父组件的数据。如果想要通过父组件向子组件传递数据，就需要定义 Prop。Prop 是父组件用来传递数据的一个自定义属性，这样的属性需要定义在组件选项对象的 props 选项中。通过 props 选项中定义的属性可以将父组件的数据传递给子组件，而子组件需要显示地用 props 选项来声明 Prop。

注意事项：

（1）Prop 传递数据，只能从父组件向子组件传递，不能反其道而行。

（2）子组件接收到 Prop 传递的数据是只读的，不能对其进行修改操作。

【实例】使用Prop实现父组件向子组件传递数据，数据类型包括：字符串、数字、数组、对象。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset class="b-parent">
        <legend>父组件</legend>
        <h3>使用Prop实现父组件向子组件传递数据</h3>
        <!-- 第三步：使用组件，并向子组件传递数据：字符串、数字、数组、对象 -->
        <ChildComponent :userName="userName" :age="age" :interest="interest" :blogInfo="blogInfo" />
    </fieldset>
</template>

<script>
//第一步：引用组件
import ChildComponent from '@/components/ChildComponent.vue'

export default {
    data() {
        return {
            // 数据类型：字符串、数字
            userName: 'pan_junbiao的博客',
            age: 36,
            // 数据类型：数组
            interest: ['游泳', '篮球', '羽毛球', '跑步'],
            // 数据类型：对象
            blogInfo: {
                blogName: '您好，欢迎访问 pan_junbiao的博客',
                blogUrl: 'https://blog.csdn.net/pan_junbiao'
            }
        }
    },
    //第二步：注册组件
    components: {
        ChildComponent,
    }
}
</script>

（2）创建 ChildComponent.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <p>用户姓名：{{ userName }}</p>
        <p>用户年龄：{{ age }}</p>
        <p>兴趣爱好：{{ interest.join('；') }}</p>
        <p>博客信息：{{ blogInfo.blogName }}</p>
        <p>博客地址：{{ blogInfo.blogUrl }}</p>
    </fieldset>
</template>

<script>
export default {
    // 使用 props 属性：接收父组件传递过来的数据
    props: ['userName', 'age', 'interest', 'blogInfo']
}
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

（3）在 App.vue 根组件中，引入父组件

<template>
  <!-- 第三步：使用组件 -->
  <ParentComponent />
</template>

<script>
//第一步：引用组件
import ParentComponent from '@/components/ParentComponent.vue'

export default {
  //第二步：注册组件
  components: {
    ParentComponent,
  }
}
</script>

执行结果：

2、数据验证

组件可以为 Prop 指定验证要求。当开发一个可以被他人使用的组件时，验证可以让使用者更加准确地使用组件。使用验证的时候，Prop 接收的参数是一个对象，而不是一个字符串数组。例如，props : { age : Number}，表示验证参数 age 须为 Number 类型，如果调用该组件时传入的 age 为 Number 以外的类型，则会在浏览器的控制台提示异常信息。

Vue.js 提供的 Prop 验证方式有多种，下面分别进行介绍。

（1）基础类型验证：允许参数为指定的一种类型。

props : {
    userName : String
}

（2）多种类型：允许参数为多种类型之一。

props : {
    tel : [Number, String]
}

（3）参数必须：参数必须有值且为指定的类型。

props : {
    userName : {
         type : String,
         required : true
    }
}

（4）参数默认：参数具有默认值。

props : {
    sex : {
         type : String,
         default : '男'
    }
}

（5）如果参数类型为数组或对象，则其默认值需要通过函数返回值的形式获取。

props: {
    //验证是否为数组类型且有默认值
    interest: {
        type: Array,
        default: function () {
            return ['游泳', '篮球', '羽毛球', '跑步']
        }
    },
    //验证是否为对象类型且有默认值
    blogInfo: {
        type: Object,
        default: function () {
            return {
                blogName: '您好，欢迎访问 pan_junbiao的博客',
                blogUrl: 'https://blog.csdn.net/pan_junbiao'
            }
        }
    }
}

（6）自定义验证函数：根据验证函数验证参数是否符合要求。

props: {
    //验证是否为数值且值必须大于等于18
    age: {
        type: Number,
        validator: function (value) {
            return value >= 18
        }
    }
}

【实例】对父组件中传递的数据进行 Prop 验证。

<template>
    <fieldset>
        <legend>子组件</legend>
        <p>用户姓名：{{ userName }}</p>
        <p>用户性别：{{ sex }}</p>
        <p>用户年龄：{{ age }}</p>
        <p>兴趣爱好：{{ interest.join('；') }}</p>
        <p>博客信息：{{ blogInfo.blogName }}</p>
        <p>博客地址：{{ blogInfo.blogUrl }}</p>
    </fieldset>
</template>

<script>
export default {
    // 使用 props 属性：接收父组件传递过来的数据，并进行数据验证
    props: {
        //验证是否字符串类型且必须有值
        userName: {
            type: String,
            required: true
        },
        //验证是否为字符串类型且默认值为男
        sex: {
            type: String,
            default: '男'
        },
        //验证是否为数值且值必须大于等于18
        age: {
            type: Number,
            validator: function (value) {
                return value >= 18
            }
        },
        //验证是否为数组类型且有默认值
        interest: {
            type: Array,
            default: function () {
                return ['游泳', '篮球', '羽毛球', '跑步']
            }
        },
        //验证是否为对象类型且有默认值
        blogInfo: {
            type: Object,
            default: function () {
                return {
                    blogName: '您好，欢迎访问 pan_junbiao的博客',
                    blogUrl: 'https://blog.csdn.net/pan_junbiao'
                }
            }
        }
    }
}
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

执行结果：