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


相关推荐

  • linux shell 循环处理文件夹每个文件

    linux shell 循环处理文件夹每个文件在linux下,如果有一个文件夹,下面有好几个文件。每个文件如abc.csv这种格式。我想一个个处理文件,并且取得前缀abc,生成新文件abc.text.代码如下。注意我这里采用的是把*.cnf处理成*.csvfeatureSAT12是我需要调用的程序,在DIMACS上一个文件夹。#!/bin/bashPATH=”DIMACS”//最好使用绝对路径cd$PATHfor

    2022年7月24日
    6
  • 游戏报错0xc000007b(错误状态0xc0000020)

    最后更新:2019-2-28如图,0xc000007b这个错误使无数玩家烦恼。问题描述:出现这个错误,可能是硬件的问题,也可能是软件的问题。但是,由于硬件引起该问题的概率很小,并且除了更换硬件之外没有更好的解决方法,因此本文将详细介绍如何通过软件解决此问题,这也是大家最关心的。由于本文阅读用户众多,大家对于电脑故障解决的熟悉程度也不一样,因此本文致力…

    2022年4月10日
    35
  • Dubbo服务降级

    Dubbo服务降级dubbo降级服务使用dubbo在进行服务调用时,可能由于各种原因(服务器宕机/网络超时/并发数太高等),调用中就会出现RpcException,调用失败。服务降级就是指在由于非业务异常导致的服务不可用时(上面举得例子),可以返回默认值,避免异常影响主业务的处理。官方dubbo3.0-给出的服务降级RegistryFactoryregistryFactory=ExtensionLoader.getExtensionLoader(RegistryFactory.class)

    2022年4月30日
    52
  • JedisPool_java.util.Scanner

    JedisPool_java.util.Scanner本节目标通过JedisPool获取Jedis示例,并完成对redis简单的Key-value读写操作。完整代码结构如下:redis服务端在本地运行redis-server.exe,然后在resources新建jedis.properties:redis.host=localhostredis.port=6379配置jedis我们将jedis相关配置放在单独的SpringConfig中,在res…

    2025年9月12日
    3
  • Pytorch的nn.Conv2d()详解

    Pytorch的nn.Conv2d()详解nn.Conv2d()的使用、形参与隐藏的权重参数in_channelsout_channelskernel_sizestride=1padding=0dilation=1groups=1bias=Truepadding_mode=’zeros’nn.Conv2d()的使用、形参与隐藏的权重参数  二维卷积应该是最常用的卷积方式…

    2022年4月7日
    264
  • 用Java代码实现学生管理系统[通俗易懂]

    用Java代码实现学生管理系统[通俗易懂]学生管理系统1.1项目演示1.2学生管理系统实现思路定义学生类主界面的代码编写添加学生的代码编写查看学生的代码编写删除学生的的代码编写修改学生的代码编写1.3定义学生类学生类:Student成员变量:学号:sid姓名:name年龄:age居住地:address构造方法:无参构造带四个参数的构造成员方法:每个成员变量对应给出get/set方法1.4主界面的代码编写思路用输出语句完成主界面的编写用Scanner实现键盘录

    2022年9月20日
    2

发表回复

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

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