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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 本体编辑、知识推理与检索

    本体编辑、知识推理与检索本体编辑、知识推理与检索一切要从一个倒霉项目开始说起,项目要求根据一个构建好的本体文件,通过JAVA调用相应API实现对本体文件的编辑、推理以及检索。由于之前对本体、知识图谱这些完全不熟悉,被强行推入坑之后就开始了漫长且毫无希望的技(疯)术(狂)调(百)研(度)之路。。。。调研之前:这是啥呀?调研之后:这tm都是些啥啊!!呼~~好在最后算是做出来了,故在此记录一下过程及部分主要代码。1…

    2022年5月16日
    54
  • python字符串转化列表_Python列表到字符串的转换[通俗易懂]

    python字符串转化列表_Python列表到字符串的转换[通俗易懂]python字符串转化列表Sometimeswewanttoconvertthelisttoastringsothatwecanprintitorlogitfordebuggingpurposes.Inthistutorial,wewilllearnhowtoconvertalisttostringinaPythonpro…

    2022年5月10日
    40
  • 极限定义理解「建议收藏」

    极限定义理解「建议收藏」(ε,δ)语言:在微积分中,(ε,δ)极限的定义(极限的“epsilon-delta定义”)是极限概念的形式化。极限定义:槽点:为什么需要领域的概念?如果没有领域而使用函数定义域的话,会导致极限不存在,极限存在只有在左极限和右极限存在且相等之下。为什么要去心?我们所说的是无限接近,无限逼近的意思,则该点c去心。ε,δ在描述极限中到底是什么角色?在上述极限的定义中,ε:表示f(…

    2022年4月29日
    245
  • 无刷直流电动机驱动控制系统_直流无刷电机驱动电路

    无刷直流电动机驱动控制系统_直流无刷电机驱动电路无刷直流电动机利用电子开关线路和位置传感器来代替有刷直流电机电刷和换向器,使其同时具有直流电动机和交流电动机的优良特性。无刷直流电机(驱动系统)主要由电动机本体、位置传感器、电子开关线路三部分组成。

    2022年10月21日
    5
  • hesse矩阵和jacobi矩阵_安索夫矩阵和波士顿矩阵区别

    hesse矩阵和jacobi矩阵_安索夫矩阵和波士顿矩阵区别转载自:http://jacoxu.com/jacobian%E7%9F%A9%E9%98%B5%E5%92%8Chessian%E7%9F%A9%E9%98%B5/在网上看到的一篇不错的关于雅克比

    2022年8月3日
    7
  • Java使用OSS实现上传文件

    Java使用OSS实现上传文件

    2021年11月12日
    50

发表回复

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

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