我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

在 Vue 中构建组件通常需要定义一些属性,以使组件可以更好复用,在这种情况下会使用 props 来自定义数据来传递数据。接下来以一个简单的组件来介绍如何使用组件 props 。

<CrayonAlert title="友情提示"  description="请输入真实的信息" />

如上面代码所示,组件定义两个属性 title 和 description,组件代码如下:

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue的Props实例配置详解

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

react组件实例属性props实例详解

这篇文章主要介绍了react组件实例属性props,本文结合实例代码给大家简单介绍了props使用方法,代码简单易懂,需要的朋友可以参考下
2023-01-30

实例详解vue render函数中如何修改props

Vue的render函数是一个很强大的工具,可以帮助我们更加自由地创建组件并渲染页面,并且在某些场景下render函数也可以帮我们提升一些性能。在一些情况下,我们希望在render函数中修改props,那么该怎么做呢?下面来一起看看。在我们正式开始讨论如何修改render函数中的props前,我们需要明确一点:props是只读的。这意味着在组件内部我们不能直接修改props的值
2023-05-14

Vue的子组件props如何设置多个校验类型

这篇文章主要介绍了Vue的子组件props如何设置多个校验类型问题。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-11

Vue路由组件如何通过props配置传参

本篇内容介绍了“Vue路由组件如何通过props配置传参”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!具体如下:一、基于params参数传递
2023-07-02

vue 内置组件 component 的用法示例详解

这篇文章主要介绍了vue内置组件component的用法,本文给大家介绍了component内置组件切换方法,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-11-13

vue3父组件和子组件如何传值实例详解

近期学习vue3的父子组件之间的传值,发现跟vue2.x的父子组件之间的传值并没有太大的区别,下面这篇文章主要给大家介绍了关于vue3父组件和子组件如何传值的相关资料,需要的朋友可以参考下
2022-11-13

vue选项卡Tabs组件实现示例详解

这篇文章主要为大家介绍了vue选项卡Tabs组件实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

vue如何动态加载组件详解

组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于vue如何动态加载组件的相关资料,需要的朋友可以参考下
2022-11-13

Vue冷门技巧递归组件实践示例详解

这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-03-06

vue input组件如何设置失焦与聚焦

这篇文章主要介绍了vue input组件如何设置失焦与聚焦,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

编程热搜

目录