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)
其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,
但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • shell文字过滤程序(十):cut命令

    shell文字过滤程序(十):cut命令

  • 帝国时代之国家崛起_崛起于帝国时代

    帝国时代之国家崛起_崛起于帝国时代01关系数据库帝国现在是公元2009年,关系帝国已经统治了我们30多年,实在是太久了。1970年,科德提出关系模型,1974年张伯伦和博伊斯制造出了SQL,帝国迅速建立起了统治。从北美到…

  • 图片转换成html代码_java html转图片

    图片转换成html代码_java html转图片1.页面上的图片,转换成base64格式,可以通过canvas的toDataURL例子:给定图片的url将图片转换为base64varimageSrc="../images/

  • 左连接 ,右连接,内连接和全外连接的4者区别[通俗易懂]

    左连接 ,右连接,内连接和全外连接的4者区别[通俗易懂]基本定义:  leftjoin(左连接):返回包括左表中的所有记录和右表中连接字段相等的记录。  rightjoin(右连接):返回包括右表中的所有记录和左表中连接字段相等的记录。  innerjoin(等值连接或者叫内连接):只返回两个表中连接字段相等的行。  fulljoin(全外连接):返回左右表中所有的记录和左右表中连接字段相等的记录。举个例子: …

  • 基于java的酒店管理系统的设计与实现_java酒店管理系统源码

    基于java的酒店管理系统的设计与实现_java酒店管理系统源码前言:项目是使用Javaswing开发,可实现基础数据维护用户登录、系统首页酒店信息管理、主要模块是开房管理、退房管理、房间信息管理、顾客信息管理等功能。界面设计比较简介、适合作为Java课设设计以及学习技术使用。引言在信息高度发达的今天,酒店业务涉及的各个工作环节已不再仅仅是传统的住宿、结算业务,而是更广、更全面的服务性行业代表。酒店宾馆作为一个服务性行业,从客房的营销即客人的预定开始,到入住登记直到最后退房结账,整个过程应该能够体现以宾客为…

  • js滑动拼图验证插件(验证码拼图怎么滑动)

    大家在很多网站上应该见过这样的验证方式,用户需要拖动一个小滑块并将小滑块拼接到背景图上空缺的位置才能完成验证,这种拖动验证码时基于用户行为的,比传统在移动端有更好的体验,减少用户的输入。大家在很多网站上应该见过这样的验证方式,用户需要拖动一个小滑块并将小滑块拼接到背景图上空缺的位置才能完成验证,这种拖动验证码时基于用户行为的,比传统在移动端有更好的体验,减少用户的输入。目前市面上做的好的拖动验…

发表回复

您的电子邮箱地址不会被公开。

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