vue3 基础-单项数据流
本篇还是了解关于组件间传值, 核心点是了解子组件只能接收父组件传递的数据而不能反向修改从而影响到其他组件造成的混乱局面.
传多值的问题
当我们要传递数据很多的时候, 可以将数据都存在一个对象中, 直接将整个对象传过去, 这样就不要逐个去 v-bind 啦, 对于子组件则也通过处理对象的语法, 按需享用.
<!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 {
// 直接将数据封装在一个对象中传过去
obj: {
num: 666,
firstName: 'you',
lastName: 'ge',
job: 'marketing'
}
}
},
template: `
<div>
<Son :content="obj" />
</div>
`
})
app.component('Son', {
props: [ 'content'],
template: `
<div>{{content}}--{{typeof content}}</div>
<div>{{content.firstName}}<div>
<div>{{content.lastName}}<div>
<div>{{content.job}}<div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这种操作在在实际中应用是非常高频的.
{ "num": 666, "firstName": "you", "lastName": "ge", "job": "marketing" }--object
you
ge
marketing
属性大小写传参问题
当属性名特别长的时候, 基于 html 语法的渲染规则限定, 其属性是不能识别大小写, 即驼峰命名是无效的, 如:
<div dataAbc="666"></div>
这里的 "dataAbc" 在 html 中是不能识别的, 它会将其转为小写即 "dataabc". 那这样就和 js 有不兼容了. 基于此, vue 在底层有做了一个关于 "-" 和驼峰的转化, 具体的约定则是:
- 父组件在传数据的时候, 属性名称用 "abc-de" 这种短横线命名
- 子组件在接数据的时候, 用 "abcDe" 来进行获取
<!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: 666 }
},
// 1. 传数据的时候, 属性名称用 "abc-de" 这种短横线命名
template: `
<div>
<Son :content-num="num" />
</div>
`
})
// 2. 子组件在接数据的时候, 用 "abcDe" 来进行获取
app.component('Son', {
props: [ 'contentNum'],
template: `<div>{{contentNum}}--{{typeof contentNum}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
单项数据流
即子组件只能使用父组件传过来的数据, 但不能反向修改. 不然就有伦理问题啦.
<script>
const app = Vue.createApp({
data () {
return { num: 666 }
},
template: `
<div>
<Son :content-num="num" />
</div>
`
})
// 子组件可以使用父组件传递的数据, 但不能修改
app.component('Son', {
props: ['contentNum'],
template: `<div @click="contentNum += 1">{{contentNum}}</div>`
})
const vm = app.mount('#root')
</script>
这样是绝对行不通滴, 所以才叫单项数据流嘛, 如果能改那就混乱了. 一个皇帝多个儿子, 其中一个把皇帝干掉了, 这种斗争是很可怕的. 所以 vue 在设计上就不允许这种牛逼的儿子存在, 忤逆圣命.
那怎么能实现自己的定制需求呢, 其实很简单, 通过 data ( ) 来拷贝一个副本就不行啦.
<!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: 666 }
},
template: `
<div>
<Son :content-num="num" />
</div>
`
})
app.component('Son', {
props: ['contentNum'],
// 但是可以拷贝一个副本就可为所欲为了哎呀
data () {
return { myNum: this.contentNum }
},
template: `<div @click="myNum += 1">{{myNum}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
小结
- 当父组件传多值给子组件时, 可将数据都封装在一个对象中, 整个传递过去
- 父组件在传数据的时候, 属性名称用 "abc-de" 这种短横线命名
- 子组件在接数据的时候, 用 "abcDe" 来进行获取
- 单项数据流即子组件只能对父组件传来的数据"可读" 不能改, 不然就耦合乱伦了
- 子组件可通过 data ( ) 中对数据进行一个拷贝副本, 然后对副本依然可以为所欲为
vue3 基础-单项数据流的更多相关文章
- Vue组件中的单项数据流
当子组件中的input v-model 父组件的值时不能直接绑定props的值要使用计算属性,向下面的写法,因为props是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...
- Vue_(组件通讯)单项数据流
Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...
- vue-父子组件之传值和单项数据流问题
前言 我们知道 vue 中父子组件的核心概念是单项数据流问题,props 是单项传递的.那究竟什么是单项数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 正文 1.父组件传值给子组件 < ...
- （大数据工程师学习路径）第一步 Linux 基础入门----数据流重定向
介绍 开始对重定向这个概念感到些许陌生,但通过前面的课程中多次见过>或>>操作了,并知道他们分别是将标准输出导向一个文件或追加到一个文件中.这其实就是重定向,将原本输出到标准输出的数 ...
- 从Flux到Redux详解单项数据流
从Flux到Redux是状态管理工具的演变过程,但两者还是有细微的区别的.但是最核心的都还是观察者模式的应用. 一.Flux 1. Flux的处理逻辑 通俗来讲,应用的状态被放到了store中,组件是 ...
- vue单项数据流
当父组件给子组件传递数据的时候,子组件只能读取,不能改写.因为如果子组件改变父组件传递过来的数据时会造成数据流难以理解.
- vue中的单项数据流
在VUE中,数据从父组件流向(传递)给子组件,只能单向绑定,在子组件内部不应该修改父组件传递过来的数据. 如果必须修改子组件中接收的数据,可以: 1. 作为data中局部数据,进行改动 2. 作为子组 ...
- vue3基础
什么是CDN? 内容分发网络--通过相互链接的网络系统,利用最靠近用户的服务器,更快更可靠的发送给用户. vue的cdn引入 method中的函数为什么不能用this? this的主要使用是来获取da ...
- Redux基础必知必会 reducer拆分 中间件 单向数据流
什么是 redux? 三大原则? 什么是 redux Redux 是一个基于 js 的全局可预测状态容器,主要用于现代前端框架中进行全局状态管理,能够在不同组件之间进行状态共享 Redux 常与 Re ...
- Vue3 中有哪些值得深究的知识点？
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...
随机推荐
- 什么是极限编程 (XP)？
极限编程(XP) 是2000 年代初期最广为人知和使用最多的敏捷方法之一.XP 是Kent Beck.Ron Jeffries和Ward Cunningham的创意,基于他们在戴姆勒克莱斯勒的集体经验 ...
- 异地组网工具 Radmin_LAN：将远程计算机连接到单一本地网络
Radmin LAN是一款使用简单的免费软件产品,用于创建虚拟本地网络.该程序允许用户安全地连接位于防火墙后的计算机.为流量提供一个安全通道.可靠的端到端加密(256位AES)确保您的连接安全. Ra ...
- 阿里巴巴开源ETL(数据的抽取、转换、加载)工具-----DataX
一个比Sqoop好用的数据传输工具 下载maven的时候,加一个 -P让下载的压缩包到指定目录 而要让档案自动储存到指令的目录下,则需要借用-P这个参数wget -p 目录 网址wget -P /ro ...
- P11620 [Ynoi Easy Round 2025] TEST_34
由子序列和最值异或可以想到线性基 发现其实线性基满足结合律 考虑线段树进行维护 那么显然的一个想法就是把1操作直接上tag 但是发现上tag其实会丢失线性基的性质 于是差分 将区间修改变为单点修改 考 ...
- 基于标签值分布的强化学习推荐算法(Reinforcement Learning Recommendation Algorithm Based on Label Value Distribution)
前言 看论文的第三天,坚持下去. 慢慢来,比较快. -- 唐迟 本文基于2023年6月28日发表在MATHEMATICS上的一篇名为"基于标签值分布的强化学习推荐算法"(Reinf ...
- 「二」nginx下载与安装
1.下载地址(开源版):https://nginx.org/en/download.html wget https://nginx.org/download/nginx-1.14.2.tar.gz 2 ...
- 【C#语法糖 Lambda】2 - 表达式树与LINQ
一.声明 曾经遇到一个这样的场景: GetEntities(a => a.OrderKindCodeId == 16 && a.IsDeleted, this.DefaultCo ...
- C#弃元表达式的用法
原文地址:http://cshelloworld.com/home/detail/1803462343674433536 弃元符号是什么 弃元符号在C#中只是一个下划线 _,当程序员不想关注某些变量的 ...
- PV、UV、VV、IP含义及计算方式
什么是PV? PV 即 Page View,网站浏览量,指页面浏览的次数,用以衡量网站用户访问的网页数量. 用户每次打开一个页面便记录1次PV,多次打开同一页面则浏览量累计.一般来说,PV与来访者的数 ...
- PaddleOCR学习笔记2-初步识别服务
今天初步实现了网页,上传图片,识别显示结果到页面的服务.后续再完善. 采用flask + paddleocr+ bootstrap快速搭建OCR识别服务. 代码结构如下: 模板页面代码文件如下: up ...