Vue组件如何设置Props实例详解

更新时间：2022年06月09日 16:44:15 作者：天行无忌

props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下

<template>
    <div>
        <h2>{{ title }}</h2>
        <p>{{ description }}</p>
    </div>
</template>
<script>
export default {
    name: "CrayonAlert",
    props: {
        title: {
            type: String,
        },
        description: {
            type: String,
        },
    },
};
</script>

属性类型

props 不仅限于 String ，还可以是以下类型：

Object
Array
Symbol
Function
Number
String
Date
Boolean

属性默认值

在上面代码中，当组件没有传入相应的属性值的情况下，会显示 undefined 或者在模板HTML没有任何文本，这个时候可以考虑定义一个默认值：

export default {
    name: "CrayonAlert",
    props: {
        title: {
            type: String,
            default: "提示",
        },
        description: {
            type: String,
            default: "描述",
        },
    },
};

设置好默认值后，在没有传入任何参数值的时候，会显示默认值。这种方式在 Vue2 比较常用。

属性值验证

跟 Form 数据一样，组件属性值也可以对其进行验证，如下：

export default {
    name: "CrayonAlert",
    props: {
        title: {
            type: String,
            validator(value) {
                return value !== "";
            },
        },
        description: {
            type: String,
            validator(value) {
                return value !== "";
            },
        },
    },
};

Composition API 中设置属性

在 Vue3 中，引入了一种称为 Composition API 的新方法。在 Composition API 中，定义 props 使用 defineProps 函数。定义没有默认值的属性如下所示：

import { defineProps } from "vue";

const props = defineProps({
    title: {
        type: String,
    },
    description: {
        type: String,
    },
});

设置默认值和在Vue2 中有点类似，如下：

import { defineProps } from "vue";

const props = defineProps({
    title: {
        type: String,
        default: "提示",
    },
    description: {
        type: String,
        default: "描述",
    },
});

为了避免在属性上设置默认值，可以通过使用 required 字段来设置属性为必须项。定义代码如下：

import { defineProps } from "vue";

const props = defineProps({
    title: {
        type: String,
        default: "提示",
        required: true,
    },
    description: {
        type: String,
        default: "描述",
        required: true,
    },
});

总结

到此这篇关于Vue组件如何设置Propsx的文章就介绍到这了,更多相关Vue组件Propsx内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3 列表界面数据展示详情
这篇文章主要介绍了Vue3 列表界面数据展示，文章主要详介绍的内容就是做的就是把打到页面的数据，带样式，也就是说好看点显示,需要的朋友可以参考一下
2021-11-11
解决vue使用vant轮播组件swipe + flex时文字抖动问题
这篇文章主要介绍了解决vue使用vant轮播组件swipe + flex时文字抖动问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-01-01
详解vue中computed 和 watch的异同
本篇文章主要介绍了vue中computed 和 watch的异同，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue2项目导出操作实现方法(后端接口导出、前端直接做导出)
这篇文章主要给大家介绍了关于vue2项目导出操作实现方法的相关资料,文中介绍的是后端接口导出、前端直接做导出,通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-05-05
vue父列表数据获取子列表数据的实现步骤
本文档将介绍如何通过点击父列表（表格）中的数据行来获取到子列表（表格）的数据,代码示例是基于Vue框架实现的一个组件,包含了父列表和子列表,通过点击父列表的数据行来动态获取子列表的数据,感兴趣的朋友跟随小编一起看看吧
2024-06-06
Vue.js中的下载和调用方式
这篇文章主要介绍了Vue.js中的下载和调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-11-11
Vue2.0生命周期的理解
这篇文章主要为大家介绍了Vue2.0生命周期，思考与理解“el被新创建的vm.$el替换”这句话，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-08-08
vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题
在Vue项目构建过程中,如果遇到无法识别'vue-cli-service'命令的错误提示,通常是因为没有全局安装vue-cli,解决这个问题的步骤主要包括：首先检查Vue版本,如果未安装则先安装Vue；其次全局安装vue-cli；若在安装过程中遇到cnpm命令找不到的情况
2024-10-10
Vue3中element-plus全局使用Icon图标的过程详解
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
这篇文章主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04