码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 子组件读取不到父组件传过来对象的具体的值


    问题描述:

    提示:这里描述项目中遇到的问题:

    图示:


    原因分析:

    提示:这里填写问题的分析:

    vue2 的双向数据绑定(又称响应式)原理,是通过数据劫持结合发布订阅模式的方式来实现的,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。

    所以 子组件中可以查看父组件传入的对象 却 不能读取到 对象中的而具体的某一个值,


    解决方案:(监听)

    提示:这里填写该问题的具体解决方案:

    如果只是读取对象里面某一个属性的值的话,那么就监听那一个属性值

    示例

    1. watch: {
    2. /*监听父组件传过来的节点
    3. */
    4. 'clickData.activityDefid':function(val){
    5. this.clickData.activityDefid=val
    6. console.log("父组件传来的节点的======",this.clickData.activityDefid)
    7. },
    8. },

     如果需要读取对象里面不止一个属性的话,那么应该监听整个对象

    1. watch: {
    2. // 深度监听父组件传过来的对象
    3. clickData: {
    4. deep: true,
    5. handler: function (newVal,oldVal){
    6. // console.log('newValue1111111', newVal.activityDefid);
    7. // console.log('oldValue2222222', newVal.lineId);
    8. if(newVal.activityDefid =='manualActivity'
    9. ||newVal.activityDefid =='contractUsers'
    10. ||newVal.activityDefid =='manualActivity2'
    11. ||newVal.activityDefid =='manualActivity13'){
    12. if(newVal.lineId!=""){
    13. console.log("读取成功,使用对象里面的属性值判断也进入了",)
    14. }
    15. };
    16. }
    17. }
    18. },

  • 相关阅读:
    UI组件库Kendo UI for Vue中文入门指南(四)
    学习JAVA的第十二天(基础)
    HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin)
    三面面试官:运行 npm run xxx 的时候发生了什么?
    (自用)learnOpenGL学习总结-高级光照-blinn-phong and Gamma矫正
    从我开发的深度学习框架看深度学习这几年
    NetCoreAPI操作Excel表格
    Jekyll 教程——快速上手
    2022年经典散文:滚烫的石板
    idea 启动报错 Command line is too long
  • 原文地址:https://blog.csdn.net/m0_63026408/article/details/133700146
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号