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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+iview+less 实现换肤功能
这篇文章主要介绍了vue+iview+less 实现换肤功能,项目搭建用的vue—cli，css框架选择的iview，具体操作流程大家跟随脚本之家小编一起看看吧
2018-08-08
vue用Object.defineProperty手写一个简单的双向绑定的示例
这篇文章主要介绍了用Object.defineProperty手写一个简单的双向绑定的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue 过渡（动画）transition组件案例详解
这篇文章主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
vue中elementUI里面一些插件的使用
Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于vue中elementUI里面一些插件的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
.env在mode文件中如何添加注释详解
这篇文章主要为大家介绍了.env在mode文件中如何添加注释详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue实现在进行增删改操作后刷新页面
这篇文章主要介绍了vue实现在进行增删改操作后刷新页面，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue 更改连接后台的api示例
今天小编就为大家分享一篇vue 更改连接后台的api示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue组件中的自定义事件你了解多少
这篇文章主要为大家详细介绍了Vue组件中的自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue子组件监听父组件值的变化
这篇文章主要介绍了Vue子组件监听父组件值的变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue3中配置文件vue.config.js不生效的解决办法
这篇文章主要介绍了vue3中配置文件vue.config.js不生效的解决办法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下
2024-05-05