当前位置: 开发笔记 > 前端 > 正文

VueJS组件之间通过props交互及验证的方式

作者：孤独的李新_780 | 来源：互联网 | 2022-01-25 10:19

props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声

props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。

父组件通过props将数据传递给子组件

HTML

动态 props组建数据传递

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

HTML

v-bind 指令将 todo 传到每一个重复的组件中

HTML







注意: props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。 
组件为 props 指定验证要求
props 是一个对象而不是字符串数组时，它包含验证要求：
JS

Vue.component('example', {
 props: {
  // 基础类型检测 （`null` 意思是任何类型都可以）
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字，有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组／对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})



type 可以是下面原生构造器：

  String
  Number
  Boolean
  Function
  Object
  Array

type 也可以是一个自定义构造器，使用 instanceof 检测。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

推荐阅读

jquery
如何使用jQuery阻止事件冒泡

本文详细介绍了如何使用jQuery防止事件冒泡，确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释，帮助开发者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-12-25 19:47:37
html
基于KVM的SRIOV直通配置及性能测试

SRIOV介绍、VF直通配置，以及包转发率性能测试小慢哥的原创文章，欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]

蜡笔小新 2024-12-25 19:26:39
html
深入探讨CPU虚拟化与KVM内存管理

本文详细介绍了现代服务器架构中的CPU虚拟化技术，包括SMP、NUMA和MPP三种多处理器结构，并深入探讨了KVM的内存虚拟化机制。通过对比不同架构的特点和应用场景，帮助读者理解如何选择最适合的架构以优化性能。 ... [详细]

蜡笔小新 2024-12-25 19:15:51
js
Babylon.js 实例展示

探索 Babylon.js 的强大功能，通过全屏演示体验其卓越性能。本文提供在线文档链接和默认渲染管线的源码调试地址，帮助您深入了解 Babylon.js 的工作原理。 ... [详细]

蜡笔小新 2024-12-25 18:55:24
json
Git 分布式版本控制系统：远程仓库的深入探讨

本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例，帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]

蜡笔小新 2024-12-25 18:30:21
build
POJ 1691 矩形涂色问题 (DFS/状态压缩DP)

本题通过将每个矩形视为一个节点，根据其相对位置构建拓扑图，并利用深度优先搜索（DFS）或状态压缩动态规划（DP）求解最小涂色次数。本文详细解析了该问题的建模思路与算法实现。 ... [详细]

蜡笔小新 2024-12-25 18:27:21
json
使用npm脚本同时启动多个监听服务的技巧

本文介绍了如何利用npm脚本和concurrently工具，实现本地开发环境中多个监听服务的同时启动，包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]

蜡笔小新 2024-12-25 18:10:18
node.js
解析猫鼬 findOne 方法返回 null 的原因

本文探讨了在通过 API 端点调用时，使用猫鼬（Mongoose）的 findOne 方法总是返回 null 的问题，并提供了详细的解决方案和建议。 ... [详细]

蜡笔小新 2024-12-25 17:40:33
js
JavaScript 条件语句与循环结构详解

本文详细介绍了 JavaScript 中的条件判断（if-else 和 switch）以及循环控制（for、while 和 do-while）。我们将探讨这些结构的基本语法、使用场景及注意事项，并补充一些实用技巧。 ... [详细]

蜡笔小新 2024-12-25 17:28:31
json
VSCode 自定义代码片段配置：实现类似IDEA的快捷代码段（如sout或psvm）

本文详细介绍如何在VSCode中配置自定义代码片段，使其具备与IDEA相似的代码生成快捷键功能。通过具体的Java和HTML代码片段示例，展示配置步骤及效果。 ... [详细]

蜡笔小新 2024-12-25 17:10:13
json
优化页面加载性能

在网页开发中，页面加载速度是一个关键的用户体验因素。为了提升加载效率，避免在PageLoad事件中进行大量数据绑定操作，可以采用异步加载和特定控件来优化页面加载过程。 ... [详细]

蜡笔小新 2024-12-25 16:57:49
json
深入解析JMeter中的JSON提取器及其应用

本文详细介绍了如何在JMeter中使用JSON提取器来获取和处理API响应中的数据。特别是在需要将一个接口返回的数据作为下一个接口的输入时，JSON提取器是一个非常有用的工具。 ... [详细]

蜡笔小新 2024-12-25 16:34:37
html
使用 Bokeh 在 Python 中绘制菱形标记

本文介绍了如何使用 Python 的 Bokeh 库在图表上绘制菱形标记。Bokeh 是一个强大的交互式数据可视化工具，支持丰富的图形自定义选项。 ... [详细]

蜡笔小新 2024-12-25 15:53:56
html
解决Docker中挂载HTML5文件到容器时出现403错误的问题

本文探讨了在Linux系统上使用Docker时，通过volume将主机上的HTML5文件挂载到容器内部指定目录时遇到的403错误，并提供了解决方案和详细的操作步骤。 ... [详细]

蜡笔小新 2024-12-25 14:54:50
html
使用Dreamweaver创建用户注册表单的详细步骤

本文将详细介绍如何使用Adobe Dreamweaver创建一个功能完整的用户注册表单。通过本教程，您将掌握从插入表单元素到设置属性的每一个步骤，帮助您快速上手并完成高质量的网页设计。 ... [详细]

蜡笔小新 2024-12-25 19:04:58

孤独的李新_780

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章