第二十一章 Vue组件通信之prop校验及单向数据流

ops/2024/10/31 0:56:57/

目录

一、什么是Prop

1.1. Prop传递数据代码示例图

1.2. 演示代码App.vue 

1.3. 演示代码UserInfo.vue

二、props 校验

2.1. props校验简单写法

2.1.1. 演示代码App.vue

2.1.2. 演示代码BaseProgress.vue 

2.2. props校验完整写法

2.2.1. 演示代码BaseProgress.vue

 2.2.2. 演示代码App.vue

三、prop & data、单向数据流

3.1. 单向数据流演示代码 


一、什么是Prop

在上一个章节中,我们讲解了组件之间的关系以及组件之间父子通信的解决方案,其中就提到了props的概念,父子关系可以通过props进行通信。那么什么是Prop呢?Prop其实是组件上注册的一些自定义属性,它可以用来向子组件传递数据。

Prop的特点:

1. 可以传递任意数量的prop

2. 可以传递任意类型的prop

1.1. Prop传递数据代码示例图

1.2. 演示代码App.vue 

<template><div id="app"><UserInfo:username="username":age="age":isSingle="isSingle":house="house":fav="fav"></UserInfo></div>
</template><script>
import UserInfo from './components/UserInfo.vue'
export default {data () {return {username: '王哲晓',age: 31,isSingle: true,house: {address: '杭州'},fav: ['骑行', '写代码', '国漫', '收纳']}},components: {UserInfo: UserInfo}
}
</script><style></style>

1.3. 演示代码UserInfo.vue

<template><div class="userinfo"><h3>我是个人信息组件</h3><div>姓名:{{ username }}</div><div>年纪:{{ age }}</div><div>是否单身:{{isSingle ? '是' : '否'}}</div><div>房产:{{house}}</div><div>兴趣爱好:{{fav.join('、')}}</div></div>
</template><script>
export default {props: ['username', 'age', 'isSingle', 'house', 'fav']
}
</script><style>
.userinfo {width: 300px;border: 3px solid #000;padding: 20px;
}
.userinfo > div {margin: 20px 10px;
}
</style>

二、props 校验

props校验为组件的prop指定验证要求,不符合要求的话控制台就会有错误提示,以此帮助开发者快速发现错误。

语法:

① 类型校验:Number、String、Boolean、Array、Object、Function...

② 非空校验

③ 默认值

④ 自定义校验:通过Vue提供的validator校验器可以自定义各种校验逻辑。

2.1. props校验简单写法

2.1.1. 演示代码App.vue

<template><div class="app"><BaseProgress :w="width"></BaseProgress></div>
</template><script>
import BaseProgress from './components/BaseProgress.vue'
export default {data() {return {width: 50,}},components: {BaseProgress,},
}
</script><style>
</style>

2.1.2. 演示代码BaseProgress.vue 

<template><div class="base-progress"><div class="inner" :style="{ width: w + '%' }"><span>{{ w }}%</span></div></div>
</template><script>
export default {props: {w: Number,},
}
</script><style scoped>
.base-progress {height: 26px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}
.inner {position: relative;background: #379bff;border-radius: 15px;height: 25px;box-sizing: border-box;left: -3px;top: -2px;
}
.inner span {position: absolute;right: 0;top: 26px;
}
</style>

2.2. props校验完整写法

2.2.1. 演示代码BaseProgress.vue

<template><div class="base-progress"><div class="inner" :style="{ width: w + '%' }"><span>{{ w }}%</span></div></div>
</template><script>
export default {props: {w: {type: Number,require: true,default: 0,validator (value) {if (value >= 0 && value <= 100) {return true} else {console.error('传入的prop必须是0-100的数字')return false}}}}
}
</script><style scoped>
.base-progress {height: 26px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}
.inner {position: relative;background: #379bff;border-radius: 15px;height: 25px;box-sizing: border-box;left: -3px;top: -2px;
}
.inner span {position: absolute;right: 0;top: 26px;
}
</style>

 2.2.2. 演示代码App.vue

<template><div class="app"><BaseProgress :w="width"></BaseProgress></div>
</template><script>
import BaseProgress from './components/BaseProgress.vue'
export default {data() {return {width: 70,}},components: {BaseProgress,},
}
</script><style>
</style>

三、prop & data、单向数据流

prop和data共同点:都可以给组件提供数据。

prop和data区别:

data 的数据是自己的 → 随便改

prop 的数据是外部的 → 不能直接改,要遵循 单向数据流

单向数据流:父级 prop 的数据更新,会向下流动,影响子组件。这个数据流动是单向的。

3.1. 单向数据流演示代码 

<template><div class="app"><BaseCount :count="count" @changeCount="handleChange"></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components:{BaseCount},data(){return {count:100}},methods:{handleChange(newVal){// console.log(newVal);this.count = newVal}}
}
</script><style></style>
<template><div class="base-count"><button @click="handleSub">-</button><span>{{ count }}</span><button @click="handleAdd">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改  (谁的数据 谁负责)// data () {//   return {//     count: 100,//   }// },// 2.外部传过来的数据 不能随便修改props: {count: {type: Number,},},methods: {handleSub() {this.$emit('changeCount', this.count - 1)},handleAdd() {this.$emit('changeCount', this.count + 1)},},
}
</script><style>
.base-count {margin: 20px;
}
</style>


http://www.ppmy.cn/ops/129737.html

相关文章

环形运输距离Conveyor Belts

Conveyor Belts 题面翻译 传送带 题目描述 传送带 $ m_n $ 是一个大小为 $ n \times n $ 的矩阵&#xff0c;其中 $ n $ 是一个偶数。矩阵由顺时针移动的同心带组成。 换句话说&#xff0c;当 n 2 n2 n2 时&#xff0c;传送带矩阵就是一个 2 2 2 \times 2 22 的矩阵&a…

【FFmpeg】调整音频文件的音量

1、调整音量的命令 1)音量调整为当前音量的十倍 ffmpeg -i inputfile -vol 1000 outputfile 2)音量调整为当前音量的一半 ffmpeg -i input.wav -filter:a "volume=0.5" output.wav3)静音 ffmpeg -i input.wav -filter:a "volume=0" output.wav4)…

ubuntu 硬盘扩容

在 Linux 中&#xff0c;可以使用以下命令查看磁盘的使用情况和信息&#xff1a; 查看磁盘使用情况&#xff1a; df -h这个命令会显示所有文件系统的使用情况&#xff0c;以人类可读的格式&#xff08;例如 GB 或 MB&#xff09;。 查看磁盘分区和设备信息&#xff1a; lsblk这…

HarmonyOS开发 - 本地持久化之实现LocalStorage支持多实例

用户首选项为应用提供Key-Value键值型的数据处理能力&#xff0c;支持应用持久化轻量级数据&#xff0c;并对其修改和查询。数据存储形式为键值对&#xff0c;键的类型为字符串型&#xff0c;值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。 在上一篇中&…

Node.js:模块 包

Node.js&#xff1a;模块 & 包 模块module对象 包npm安装包配置文件镜像源 分类 模块 模块化是指解决一个复杂问题时&#xff0c;自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说&#xff0c;模块是可组合、分解和更换的单元。 简单来说&#xff0c;就是把一个…

openpnp - 解决“底部相机高级校正成功后, 开机归零时,吸嘴自动校验失败的问题“

文章目录 openpnp - 解决"底部相机高级校正成功后, 开机归零时&#xff0c;吸嘴自动校验失败的问题"概述笔记问题现象1问题现象2原因分析现在底部相机和吸嘴的位置偏差记录修正底部相机位置现在再看看NT1在底部相机中的位置开机归零&#xff0c;看看是否能通过所有校…

【开源免费】基于SpringBoot+Vue.JS校园美食分享平台 (JAVA毕业设计)

本文项目编号 T 033 &#xff0c;文末自助获取源码 \color{red}{T033&#xff0c;文末自助获取源码} T033&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

Linux相关概念和易错知识点(18)(重定向、语言级缓冲区)

目录 1.重定向 &#xff08;1&#xff09;什么是重定向&#xff1f; &#xff08;2&#xff09;dup2 ①重定向原理 ②重定向方法 &#xff08;3&#xff09;重定向和程序替换的易混点 2.语言级缓冲区 &#xff08;1&#xff09;为什么需要语言级缓冲区 &#xff08;2&am…