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)
上一篇 2022年6月5日 下午11:00
下一篇 2022年6月5日 下午11:00


相关推荐

  • vue.config.js打包优化(有效)「建议收藏」

    vue.config.js打包优化(有效)「建议收藏」//百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻未优化之前的//感觉太大了抬它优化之后的废话不多说了,上代码是重点这些是必要的下载/*cnpminstallimage-webpack-loader–save-devcnpminstallcompression-webpack-plugin–save-devcnpminstalluglifyjs-webpack-plugin–sa

    2022年6月12日
    93
  • 看看别人是如何进行大数据测试的?

    看看别人是如何进行大数据测试的?前言:我之前是做大数据测试的,熟悉我的小伙伴应该都知道,前面我写过两篇文章《什么是大数据测试?》、《怎么进行大数据测试?我们需要具备怎样的测试能力?》,当然,这篇文章我对大数据测试介绍的比较笼统,所以今天我在详细补充一下,主要是看看别人是如何进行大数据测试的,另外我推荐在做大数据测试的同学或者将要做大数据测试的同学去看看我正在看的两本书,我想看了之后你应该是有收获的——《机器人学习测试入门与实践》、《大数据测试技术与实践》,第一本书是我20年买的,第二本书是我21年买的,总体我收获还是挺多的!看看别人是如

    2022年5月8日
    133
  • scrum 和敏捷介绍(概念、流程、自己的理解)

    scrum 和敏捷介绍(概念、流程、自己的理解)本文介绍 scrum 框架 基于自己的理解 有些可能不够准确 请评论反馈 scrum 是敏捷中的一种 比较出名的一种 但并不是所有 scrum 的规模是比较小的 通常都是小团队 10 人内的很多公司可能实行的是 scrum 的变种 在流程 人员上稍作改变 敏捷的英文叫 Agile scrum 只是其中一种小团队的 一般 10 人以下 更大规模的叫 SAFe 上百上千 敏捷 常常会跟软件开发的瀑布模型 waterfall 来进行比较 ProductOwner PO 一般翻译为产品经理 直译是 产品所有人 对 productbac

    2026年3月16日
    2
  • 流利说文本level6_流利说level4原文

    流利说文本level6_流利说level4原文Level6Unit11/4ListeningLesson1Harry’sInjury1-2DialogueLesson3Lovers’QuarrelReadingLesson4TheBoyWhoCriedWolfLesson5SurvivalintheOutback2/4ListeningLesson1T…

    2022年10月8日
    5
  • asp.net UpdatePanel的简单用法「建议收藏」

    asp.net UpdatePanel的简单用法「建议收藏」局部更新是ajax技术的最基本,也是最重要的用法,今天大概把asp.netajax中的局部更新控件updatepanel的用法记录下,大家可以共同探讨UpdatePanel控制页面的局部更新,这个更新功能依赖于scriptManger控件的EnablePartialRendering属性,如果这个属性设置为false局部更新会失去作用(scriptManger控件的EnablePart

    2022年7月23日
    25
  • 这是我见过最牛逼的接口自动化测试框架没有之一:基于python+requests+pytest+allure实现

    这是我见过最牛逼的接口自动化测试框架没有之一:基于python+requests+pytest+allure实现这里写自定义目录标题新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入众所周知,企业实现接口自动化最常用的就是两种:1.基于工具类的接口自动化,如:Postman+Newman+Jenkins+Git/svnJmet

    2022年7月26日
    10

发表回复

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

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