父组件传来的值和子组件自己定义的data的值有什么区别?

2023-11-19

props和data的区别?

1、data中的数据是组件内自己的数据(状态)可以随意修改data中的值。

2、props的数据是父组件传递过来的数据,是只读的。(只能供子组件使用,不能随意修改) 

下面进行演示:1.首先创建一个父组件HomeView.vue和两个子组件Left.vue和Right.vue组件

 

 2.我们写一个页面的时候先不去拆分组件,先在父组件中直接写好(个人喜好)然后再将各个板块拆分成组件引入到父组件中。(下面是未进行拆分的代码展示和效果图)注意:v-for渲染本地图片时无法渲染的。可以将图片先引入,然后在放进data中即可。

 

 

 3.将左右组件拆分出来,然后再引入到父组件中去。

HomeView父组件展示

 Left和Right组件展示。

 之后会发现效果图出现问题,控制台报错了 提示 list is not define为什么会出现这种问题?

 首先一开始v-for渲染的数据就是在HomeView父组件中的data里用list存储数据的,但是现在组件拆分出去了之后两个子组件中是没有list数据的所以list是not define。如何要解决这个问题呢?

我们可以通过 组件传值  来解决父组件中引入的子组件上通过自定义属性可以传值。

 

 将list通过:list自定义属性进行传递(:名字可以自定义)。然后在两个子组件中通过props来接受。自定义属性的名字要和v-for in后的名字保持一致建议起同名。

 传递完成之后就发现拆分后效果图可以正常展示,也不会报错。

 然后就回到了题目,props和data的区别。

1、父组件给你的数据是让你用的。他只是传递过去了数据,子组件只是用props来进行接收而数据还是在父组件的data中。所以传递给子组件的数据是只读的无法修改也不能修改。就上面这个例子而言,子组件接受了值要想改变值的话,那只能在HomeView父组件的data中去进行修改。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

父组件传来的值和子组件自己定义的data的值有什么区别? 的相关文章

  • Google 地图 v3 - 阻止 API 加载 Roboto 字体

    Google 将样式添加到地图容器中以覆盖我的样式 我知道如何解决这个问题 但API v3 8 9 exp 还加载了我并不真正需要 想要的网络字体 Roboto 有什么设置 选项 方法可以解决这个问题吗 我可以阻止 API 添加额外的 CS
  • 显示居中的图像行

    我有一排三张图像 目前显示得很好 现在 我想在这三个图像的正下方显示另外两个图像 并且我希望它们居中 它看起来有点像一个颠倒的金字塔 无论我做什么 底行都保持左对齐 这是 css category width 176px font size
  • jQuery hide() 动画向右滑动

    使用 jQuery 的hide 使用可选的持续时间参数的函数 我可以在我的网站上获得一些警报框 以优雅地滑出屏幕并消失 隐藏动画的默认方向似乎是向左滑动 尽管此行为未在hide 定义页 http api jquery com hide 我需
  • FF 和 Webkit 中边框折叠的差异

    我有一个包含以下规则的表 table cellspacing 0 cellpadding 0 style width 100 并且单元格具有以下 CSS td padding 4px height 22px border 1px solid
  • CSS变量名可以以数字开头吗?

    我想知道定义一个以这样的数字开头的 css 变量是否有效 root 1space 32px 这在 Chrome 上工作得很好 但是该代码没有经过验证https jigsaw w3 org css validator https jigsaw
  • 如何将 OTF/TTF 文件转换为 EOT 格式?

    我需要使用 font face 功能 并且我的字体是 OTF TTF 格式 而 Microsoft 浏览器仅支持 EOT 格式 我尝试使用微软工具WEFT 但它不起作用或者我不明白它是如何工作的 还有其他方法可以将我的字体转换为 EOT 格
  • CSS3输入元素的圆角,没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added
  • CSS 按钮将线性渐变背景转换为透明背景

    我有一个带有线性渐变背景 橙色边框和一些文本的按钮 当我将鼠标悬停在按钮上时 我希望背景变得透明 而不更改按钮的其他属性 我尝试将不透明度转换为 0 但显然 这会隐藏边框和文本 我也尝试过转换背景 但它不起作用 因为我没有要转换到的端点 因
  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • 是否可以在 Javascript 中的 css3 转换期间获取目标计算的 css 属性值?

    是否有可能在 Javascript 中的 css3 转换期间获取目标 最终 计算的 css 属性值 我找到了这个答案 是否可以在 Javascript 中的 css3 转换期间获取目标 css 属性值 https stackoverflow
  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 使用无图像按钮有哪些优点?

    讨论关于这个答案 https stackoverflow com questions 520640 how can i use googles new imageless button how could i reverse enginee
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • TYPO3 显示子页面的内容,包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div

随机推荐

  • 请修改考试服务器名称,考试服务器ip数据库地址

    考试服务器ip数据库地址 内容精选 换一换 安全组是一个逻辑上的分组 为同一个虚拟私有云内具有相同安全保护需求 并相互信任的弹性云服务器和云数据库RDS实例提供访问策略 为了保障数据库的安全性和稳定性 在使用云数据库RDS实例之前 您需要设
  • Flink on Zeppelin-2

    Flink Interpreter类型 首先介绍下Zeppelin中的Flink Interpreter类型 Zeppelin的Flink Interpreter支持Flink的所有API DataSet DataStream Table
  • SQL plus简单使用

    查看Oracle数据库全部数据库 数据库名称 SELECT name FROM v database 这将返回所有数据库的名称 视图 通过SQL查询dba registry视图 另一个查看数据库的方法是查询dba registry视图 该视
  • 软件工程毕业设计题目100例

    文章目录 0 简介 1 如何选题 2 最新软件工程毕设选题 3 最后 0 简介 学长搜集分享最新的软件工程业专业毕设选题 难度适中 适合作为毕业设计 大家参考 学长整理的题目标准 相对容易 工作量达标 题目新颖 1 如何选题 最近非常多的学
  • 练手Demo(一)

    配置文件 spring redis host localhost username root password port 6379 datasource url jdbc mysql localhost 3306 base admin Un
  • 泛微OA项目引入jar包说明

    项目引入的jar包说明 WEB INF lib 依赖 存在dom4j 以及httpclient jar包 Resin lib 存在的是resin组件本身自带的依赖 ecology classbean 开发java类编译存放目录 系统目前已有
  • Java基础——strictfp关键字

    关键字strictfp是strict float point的缩写 指的是精确浮点 它是用来确保浮点数运算的准确性 JVM在执行浮点数运算时 如果没有指定strictfp关键字 此时计算结果可能会不精确 而且计算结果在不同平台或厂商的虚拟机
  • Windows 开机启动脚本 (不询问自动以管理员权限运行bat)

    方式一 系统级开机自启 不用登陆 获取开机启动文件夹 使用环境变量 ProgramData 或者 SYSTEMDRIVE echo SYSTEMDRIVE ProgramData Microsoft Windows Start Menu P
  • 对象的知识点补充

    认识对象 对象 object 是 键值对 的集合 表示属性和值的映射关系 JS中 大括号表示对象 var xiaoming 属性名 键名 key name 小明 age 12 sex 男 hobbies 足球 编程 对象的语法 k和v之间用
  • 进程间通信的方式总结(特点,以及code demo)

    进程间通信 IPC InterProcess Communication 是指在不同进程之间传播或交换信息 一 简单的进程间通信 命令行 父进程通过exec函数创建子进程时可以附加一些数据 环境变量 父进程通过exec函数创建子进程顺便传递
  • MOS管之增强型和耗尽型

    Depletion and enhancement modes In field effect transistors FETs depletion mode and enhancement mode are two major trans
  • 通过路由器端口映射实现外网IP访问内网服务器

    1 确认路由器的公网IP是不是真的公网IP 特别重要 如果不是可以不用看后面的了 通过www ip138 com网站可以查询当前网络的公网IP 再进入路由器控制界面查看wan口IP和公网IP是否相同 如果不同 大概率是私网IP 服务商在公网
  • cookie格式化

    字符串转成字典 使用场景 selenium尝试试用cookie登陆时 Network中cookie是一段字符串 需要转成字典使用 使用split和列表解析式 str thor 8954F43 Id d32def3ffSNw pn adsad
  • 数据结构---二叉查找树(二叉搜索树)

    二叉查找树 特性 插入 删除 待删除节点没有子节点 待删除节点有一个子节点 待删除节点有两个子节点 JAVA实现 缺陷 二叉查找树 二叉排序树 在二叉树的基础上 增加了 如果左子树不为空 则左子树上所有节点的值都小于根节点的值 如果右子树不
  • B站粉丝数显示器,播放数、获赞数失效解决。

    之前在B站看见很多人做B站粉丝数显示器 于是便在网上买了一块ESP8266的开发版回来尝试着折腾一个出来 便在网上搜索适合买回来的开发板和0 96 oled显示器的代码 显示部分的主要代码是在 果果小师弟的博客上找到的 然后自己又找了个可以
  • WORD中字号没有中文编号的解决办法

    今天一同事反映说 WORD中没有像 五号 四号 之类的字号 只有数字字号如 8 72 解决过程如下 一 删除office中normal dot模版文件 不行 二 开始 gt 程序 gt Microsoft Office 工具 gt Mics
  • 参数与超参数

    写在前面 关于训练深度学习模型最难的事情之一是你要处理的参数的数量 无论是从网络本身的层宽 宽度 层数 深度 连接方式 还是损失函数的超参数设计和调试 亦或者是学习率 批样本数量 优化器参数等等 这些大量的参数都会有网络模型最终的有效容限直
  • ftp的主动模式active mode和被动模式 passive mode的配置和区别

    共同点 客户端先发起命令连接 不同点 主动模式 服务端发起数据连接 客户端生成随机数据端口 被动模式 客户端发起数据连接 客户端和服务端都是随机数据端口 客户端与服务器的命令连接 服务器返回命令 PORT 2024 告诉客户端 服务器 用哪
  • SpringData使用ES报错 org.elasticsearch.index.mapper.MapperParsingException: No type specified for field

    原因就像mysql的字段要跟Java基本类型对应一样 ES的字段也要与Java的基本类型相对应 一 而且这个最好新建一个ES索引库 否则可能会有问题 我用Restful操作初始化了一个ES索引库 并增加数据 再用Java操作的时候 Spri
  • 父组件传来的值和子组件自己定义的data的值有什么区别?

    props和data的区别 1 data中的数据是组件内自己的数据 状态 可以随意修改data中的值 2 props的数据是父组件传递过来的数据 是只读的 只能供子组件使用 不能随意修改 下面进行演示 1 首先创建一个父组件HomeView