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 在创建实例 ...
随机推荐
- pnpm : 无法加载文件 \AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本。
1. 安装pnpm npm install -g pnpm #安装 pnpm pnpm --version #查看pnpm版本 安装完成后查看版本时报错 pnpm : 无法加载文件 C:\Users\ ...
- 在Linux系统下启动eclipse时遇到Eclipse 无法正常启动
Eclipse: 无法打开显示: 出现此问题原因: 这通常表示 Eclipse 试图在没有合适显示环境的情况下启动,可能是在没有图形界面的环境(例如远程服务器或没有正确配置的 X11 转发)中运行. ...
- DBeaver 连接 mysql 报错：Public Key Retrieval is not allowed
前言 DBeaver 连接 mysql 报错:Public Key Retrieval is not allowed 遇到 "Public Key Retrieval is not allo ...
- go kratos protobuf 接收动态JSON数据
前言 google.protobuf.Struct 是 Google Protocol Buffers 中的一种特殊类型,用于表示动态的键值对数据.它可以存储任意类型的数据,并提供了方便的方法来访问和 ...
- 130道基础OJ编程题之: 89~107
130道基础OJ编程题之: 89~107 @ 目录 130道基础OJ编程题之: 89~107 89. BC101 班级成绩输入输出 99. BC102 矩阵元素定位 100. BC103 序列重组矩阵 ...
- 卸载和重装docker的方式
查看已安装的版本 yum list installed|grep docker 卸载 [root@localhost ~]# yum -y remove containerd.io.x86_64 [r ...
- Docker镜像介绍
一.Docker镜像介绍 镜像是Docker的三大核心概念之一. Docker运行容器前需要本地存在对应的镜像,如果镜像不存在本地,Docker会尝试先从默认的镜像仓库下载(默认使用Docker Hu ...
- Delphi 增加/获得windows用户帐号
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- 对于 emlog pro 目前 avatar 头像不显示的问题，暂时使用这个方法解决
avatar 头像 cdn 不稳定,目前 emlog 官方还没有放出更新包.因此,现在使用 JS 的方式暂时解决. 代码如下 <script> const avaUrl = 'https: ...
- [源码系列：手写spring] IOC第七节：加载xml文件中定义的Bean
目录 主要内容 代码分支 核心代码 BeanDefinitionReader AbstractBeanDefinitionReader XmlBeanDefinitionReader 测试 bean定 ...