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 ...
随机推荐
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Live View Kit (1)
1.问题描述: 客户端创建实况窗后,通过Push kit更新实况窗内容,这个过程是自动更新的还是客户端解析push消息数据后填充数据更新?客户端除了接入Push kit和创建实况窗还需要做什么工作? ...
- QT5笔记： 35. QGraphicsView 视图
 三者关系:View中可以有多个Scene,Scene放在Vi ...
- 【CIM信息整合】关于三维建筑模型
还是无暇细细检索并总结列出有逻辑的明确表述,以下很多地方都是人云亦云的复制,自己也没太搞清 1.5 三维建筑模型 CIM中三维建筑模型主要表达建(构)筑物的空间位置.几何形态及外观效果等. 在建筑相关 ...
- svn提示Node remains in conflict的解决办法
svn 更新提示Node remains in conflict 这个时候不管svn up多少次,都无法更新到最新的内容 解决办法: svn revert --depth=infinity * 其中* ...
- MySql explain命令返回结果解读
1. explain命令是什么东西? explain 是MySql提供的SQL语句查询性能的工具,是我们优化SQL的重要指标手段,要看懂explain返回的结果集就尤为重要 2. explain命令返 ...
- Qt读取Oracle中的中文乱码问题
Qt读取oracle中的中文 因为有的时候我们的oracle数据库里面的值是一个varchar2格式的,这就是一个ascii码,但是我们qt一般不是ascii码 解决方法如下 先使用utl_raw.c ...
- Qt QSqlDatabase的removeDatabase需要注意的地方
文章目录 问题描述 Qt官方解决方法 另外一种解决方式 碎碎念 关于智能指针 问题描述 今天在做之前代码的重构的时候,在调用QSqlDatabase的removeDatabase函数的时候,出现了如下 ...
- Windows编程----线程管理
系统中,进程主要有两部分组成:进程内核对象和进程地址空间.操作系统通过进程内核对象来管理进程,进程地址空间用于维护进程所需的资源:如代码.全局变量.资源文件等. 那么线程也是有两部分组成:线程内核对象 ...
- halcon 入门教程（六） 图像匹配（基于形状的模板匹配）与缺陷检测区域定位
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/18783476 有兴趣可以多看其他的halcon教程 halcon 学习教程目录 本篇主要讲一下 ...
- 查看Unity3D中默认的变量名与按键的映射
博客地址:https://www.cnblogs.com/zylyehuo/ 选择 Edit/Project Settings/Input Manager 点击 Axes 即可查看对应变量名与按键的映 ...