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 在创建实例 ...
随机推荐
- 史陶比尔Stabli机器人维修小细节
在工业自动化领域,史陶比尔机器人以其卓越的性能和可靠性而著称.然而,即使是尖端的设备,也难免会遇到Stabli机械手故障和问题.对于机器人维护和修理,每一个小细节都显得至关重要. 一.观察 首先,我们 ...
- 天线的OTA测试
有源测试 (即OTA测试) 把使用综测仪的测试叫做有源测试(Active).使用有源测试的测试速度比较无源相对要慢,但是因为手机是一个复杂材料体,往往无源测试对发射性能的模拟是可信的,但是对于接收性能 ...
- QT5笔记： 19. QFileSystemModel 联动 QListView QTableView QTreeView
Model 指的是数据 View 指的是界面,View不用设置,只需要和Model进行绑定,绑定完成之后就是Model的格式了 例子:*本例子中QListView QTableView QTreeVi ...
- Typecho博客后台登陆界面美化
登录界面: 食用方法: 备份 admin 目录 压缩包内容上传到 admin 目录内. 结构:网站根目录 /admin/login.php 结构:网站根目录 /admin/style 修改 login ...
- 目标检测 | Farthest Point Sampling 及其 CUDA 实现
Farthest Point Sampling 及其 CUDA 实现 目录 Farthest Point Sampling 及其 CUDA 实现 概述 均匀随机采样 Farthest Point Sa ...
- Elasticsearch搜索引擎学习笔记（二）
可视化插件 GitHub搜索elasticsearch-head并下载,如果网络不好可以在gitee上搜索. 这是一个前端项目,需要安装nodejs. 在项目根目录执行 npm install npm ...
- vue练习用免费开源api大全
1. 网易云api 网易云api是网上一位大神工具网易云获取的,数据都是真实的网易云数据 2. api大全 这是csdn一个兄弟收集的,种类挺多,就是有一些需要money,不过大部分还是免费的 3. ...
- linux怎么关闭selinux
关闭方法:1.临时关闭,只需执行"setenforce 0"命令即可.2.永久关闭,需要执行"vi /etc/selinux/config"命令打开config ...
- UNIX 系统
UNIX 系统的历史,UNIX 是操作系统的开山鼻祖,是操作系统的发源地,后来的 Windows 和 Linux 都参考了 UNIX. 有人说,这个世界上只有两种操作系统: UNIX 和类 UNIX ...
- 内部类--成员内部类、静态内部类、局部内部类--java进阶day03
1.内部类 内部类分为4种,成员内部类用处不大,静态内部类和局部内部类更是鸡肋,唯有匿名内部类是需要我们重点掌握的 1.成员内部类 Inter类要访问Outer类的成员可以直接访问,而Outer要访问 ...