vue3 基础-组件间传值及校验
本篇讲基于对页面组件化拆分后, 组件之间如何进行数据传递, 通常是父组件如何给子组件进行传值, 子组件接收并进行数据校验后再使用.
父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件间传值</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
// 1. 父组件可通过 自定义属性 的方式给 子组件传递数据
template: `
<div>
<Son content="father love you forever!" />
</div>
`
})
// 2. 子组件通过 props 属性进行接收值
app.component('Son', {
props: ['content'],
// 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了
template: `<div>{{content}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
就两个关键步骤:
- 父组件可通过 自定义属性 的方式给 子组件传递数据
- 子组件通过 props 属性接收数据
动态属性传值
即根据后端数据去让父组件的属性值能动态变化地将其传递给子组件 (v-bind).
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态属性传值 v-bind</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
// 通过数据去动态传值 v-bind
data () {
return { num: 666 }
},
template: `
<div>
<Son :content="num" />
</div>
`
})
// 2. 子组件通过 props 属性进行接收值
app.component('Son', {
props: ['content'],
// 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了
template: `<div>{{content}}--{{typeof content}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
注意这里的 content 属性要通过 v-bind:content="num", 简写为 :content:"num". 此时页面显示:
666--number
然而如果通过 content:"666" 的方式传递, 则页面会显示:
666--string
说明由 data ( ) 经过 v-bind 这样动态传值子组件能识别数据类型的. 而 直接写死传则是静态的字符 string 类型.
子组件数据校验
父子组件间能动态属性传值, 则相应地子组件能对传过来的数据做一个校验, 如果有问题就警告这样的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>子组件校验数据</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { num: null }
},
template: `
<div>
<Son :content="num" />
</div>
`
})
// 子组件通过 props 属性进行接收值
// 1. 类型校验: String, Number, Boolean, Array, Object, Function
// 2. 必填校验: required: true
// 3. 默认属性: default: functioin () { reutn 666 }
// 4. 复杂校验: validator: function (value) { return value > 10 }
app.component('Son', {
props: {
content: {
type: Number,
required: true,
// 默认可以是一个值, 函数啥的都行
default: function () { return 666 },
//
}
},
// 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了
template: `<div>{{content}}--{{typeof content}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
小结
- 父组件可通过 自定义属性 v-bind 的方式给 子组件传递数据
- 子组件通过 props 属性接收数据, 并能进行各种校验
- 类型校验: String, Number, Boolean, Array, Object, Function
- 必填校验: required: true
- 默认属性: default: functioin ( )
- 复杂校验: validator: function (value)
vue3 基础-组件间传值及校验的更多相关文章
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- react组件间传值详解
一.父子组件间传值 <1>父传子 父组件:
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- React Native 系列(五) -- 组件间传值
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- Vue组件间传值 v-model
使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我 ...
- Angular中不同的组件间传值与通信的方法
主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...
- vue——父子组件间传值
(1)父组件给子组件传值(商品详情页): 根据订单类型,判断显示立即购买/立即拼单: 通过props来传递参数 父组件(商品详情页) 父组件调用子组件,在子组件的标签中,通过:数据名称=”数据”的形式 ...
- Vue3组件间传值
12种方式 1. 父组件 ./father.vue 点击查看代码 <template> <h1>father:</h1> <h3>子组件传过来的:{{ ...
- vue3.x组件间通信，实用小技巧都在这里
本想简单写写,没想到说清楚已经变成了一篇很长的帖子,欢迎当笔记搜藏起来. props / emits 父子组件通信 props一般负责向子组件传递数据 下面是一个简单的例子,父组件向子组件传递了一个t ...
随机推荐
- [JXOI2017] 加法 题解
最小值最大,考虑二分答案,问题转为判断最小值是否能 \(\ge x\). 假如 \(a_i\ge x\),那我们肯定不管:假如 \(a_i<x\),那最好能让选择的区间 \(r\) 值更大,用优 ...
- Linux编写一个自己的命令
Linux编写一个自己的命令 编译一个.c文件,生成可执行文件out.out只有在当前目录下可以执行. 而命令可在任何路径执行 想让out可以在任意路径执行,有以下两种办法 1.将执行文件添加到 /b ...
- Typecho的Joe主题开启文章导航目录树
引言 发现从typora复制过来的markdown代码中的目录导航[toc]语句没生效, 没有像typora或其他markdown编辑器生成导航目录树, 网上搜了下, 发现个解决方法, 在主题设置里插 ...
- nacos(七): gateway(单体)
这篇文章将从gateway的搭建.自动路由匹配.路由数组.跨域和路由过滤器五个方面对gateway项目展开讨论. 1.gateway的搭建 gateway的项目基本的搭建过程与消费者的搭建过程基本一致 ...
- JavaGUI - [01] 常见API
题记部分 一.Component 作为基类,提供了如下常用的方法来设置组件的大小.位置.可见性等. setLocation(int x,int y) 设置组件的位置 setSize(int width ...
- HTTPS 与 HTTP 的区别在哪？
HTTP与HTTPS作为互联网数据传输的核心协议,其通信机制与安全特性深刻影响着现代网络应用的可靠性与用户体验.本文将解析两者的通信流程.安全机制及核心差异. 一.HTTP的通信机制 先来看看HTTP ...
- selenium 提示 Non-UTF-8 code starting with '\xc4'
解决(1):在程序最上方加上语句,# coding=gbk 解决(2):在preference下进行修改
- Java的volatile和sychronized底层实现
1. 概览 从Java代码级别到硬件级别各层都是如何实现的 2. Synchronized 2.1 字节码层面 使用javap -verbose <class文件>可以查看到字节码信息,其 ...
- 持续集成cicd和devops
什么是 cicd,devops DevOps是一种思想,是一种文化,主要强调软件开发测试运维的一体化,目标是减少各个部门之间的沟通成本从而实现软件的快速高质量的发布.cicd是指持续集成发布部署,是一 ...
- Python科学计算系列5—导数
1.一元函数的导数 例1:求下列函数的导数 例2:求下列函数的50阶导数 代码如下: from sympy import * x = symbols('x') f1 = diff(tan(x)) f2 ...