vue中父组件向子组件传值

vue中父组件向子组件传值首先在以下案例中,App.vue是父组件,Second-module.vue是子组件。总体来说,父传子就是这四个步骤:父组件的data中定义值,引入并调用子组件,在引用的子组件的标签上通过v-bind指令给子组件传值,子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里。首先,值肯定是定义在父组件中的,供所有子组件共享,所以要在父组件的data中定义值:…

大家好,又见面了,我是你们的朋友全栈君。

首先在以下案例中,App.vue是父组件,Second-module.vue是子组件。
总体来说,父传子就是这四个步骤:父组件的data中定义值,引入并调用子组件,在引用的子组件的标签上通过v-bind指令给子组件传值,子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里。
首先,值肯定是定义在父组件中的,供所有子组件共享,所以要在父组件的data中定义值:
这里写图片描述
然后,父组件要和子组件有契合点,就是要在父组件中引入、注册、调用子组件:
引入:
这里写图片描述
注册:
这里写图片描述
调用:(父组件内在引用的子组件的标签上通过v-bind指令绑定上要传的值)
这里写图片描述
最后,子组件内部要去接收父组件传过来的值:使用props来接收
这里写图片描述
这样,子组件内部就可以直接使用父组件的值了
这里写图片描述
但是有要注意的点:
子组件接受的父组件的值分为——引用类型和普通类型两种,
普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
引用类型:数组(Array)、对象(Object)
其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,
但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134996.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 加工机械双探头高频读写器CK-FR102AN用户开发手册「建议收藏」

    加工机械双探头高频读写器CK-FR102AN用户开发手册「建议收藏」加工机械双探头高频读写器CK-FR102AN用户开发手册CK-FR102AN系列双探头高频读写器是一款基于射频识别技术的高频RFID标签读卡器,读卡器工作频率为13.56MHZ,支持对I-CODE2、I-CODESLI等符合ISO15693国际标准协议格式标签的读取。FR102一款轻量型RFID读头,采用菲尼克斯定制外壳,体积小、自带工控箱安装滑轨卡扣,易安装。同时支持两个探头工作,通过电缆拉长的探头在加工机械应用场景上可以灵活安装,支持姆龙plc的ethernetip通讯。读写器选型型号

    2022年6月22日
    29
  • java etl 简单实例_东方通ETL开发实例[通俗易懂]

    java etl 简单实例_东方通ETL开发实例[通俗易懂]东方通ETL开发实例下面通过一个简单的“OracleCDC增量抽取”实例,带大家感受一下TIETL的开发思路和强大的数据处理能力。功能需求:同一数据库(localhost_etl)下,现有cdc_source和cdc_target两张表如下:表cdc_source表cdc_target现表cdc_source的增量(增、删、改)需同步到cdc_target中TIETL环境下开发思路:类似于jav…

    2022年5月1日
    44
  • phpstorm2021.12永久激活码【2021最新】

    (phpstorm2021.12永久激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月30日
    417
  • 史上最全 PyCharm(Mac+Windows版) 快捷键整理,建议收藏备用「建议收藏」

    史上最全 PyCharm(Mac+Windows版) 快捷键整理,建议收藏备用「建议收藏」PyCharm应该是最常用的Python编辑器之一了,今天整理了一份PyCharm快捷键大全,包含了Mac和Windows版本,建议收藏备用。Mac版快捷键大全符号说明…

    2022年8月27日
    5
  • Zuul网关_vue动态路由和静态路由的区别

    Zuul网关_vue动态路由和静态路由的区别1.微服务架构所面临的问题?1)针对某个功能,客户端在微服务架构的情况下需要请求多个模块接口2)针对于身份认证、日志、流量控制等公共模块每个微服务都需要做一遍,不利于业务与非业务的拆分针对于这些问题,Zuul可完美解决,我们可用Zuul做:1)客户端只需要知道网关而不需要知道具体模块的地址,所有服务由网关对外提供2)身份认证类…

    2022年8月15日
    3
  • uvw对位平台,halcon联合c#编程

    uvw对位平台,halcon联合c#编程uvw对位平台,halcon联合c#编程,供学习的朋友参考

    2025年7月29日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号