41. Vue组件传值-父组件向子组件传值

41. Vue组件传值-父组件向子组件传值前言前面写了组件的创建、切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用。这里存在一个问题,就是父组件的数据如何传递到子组件中。这是一个很常见的情况,如果是jQuery那么都是直接传参数就是了,而在Vue框架中,这里就要使用子组件中props属性来处理了。官网介绍props地址:https://cn.vuejs.org/v2/guide/components-props.ht…

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

前言

前面写了组件的创建、切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用。这里存在一个问题,就是父组件的数据如何传递到子组件中。

这是一个很常见的情况,如果是jQuery那么都是直接传参数就是了,而在Vue框架中,这里就要使用子组件中props属性来处理了。

官网介绍props地址:https://cn.vuejs.org/v2/guide/components-props.html

那么下面来看看一个父组件向子组件传值的示例。

示例:使用props传静态值

1.首先编写一个组件以及父组件,展示基本的信息

41. Vue组件传值-父组件向子组件传值

image-20200210231934650

首先浏览器展示看看组件渲染情况,如下:

41. Vue组件传值-父组件向子组件传值

image-20200210232021504

2.尝试在子组件直接使用父组件的msg,看看能否显示出数据来

41. Vue组件传值-父组件向子组件传值

image-20200210232406293

浏览器显示如下:

41. Vue组件传值-父组件向子组件传值

image-20200210232514798

那么该如何使用呢?

换一个思考的方式,在app父组件中是可以使用v-bind方法来设置绑定值的,能否通过v-bind来绑定msg到子组件中呢?

3.在父组件中使用 v-bind来绑定msg到子组件中,进行传值

41. Vue组件传值-父组件向子组件传值

image-20200210233115672

通过v-bind将父组件的msg绑定传递到子组件的parentmsg中,下面来看看浏览器是否正常显示,如下:

41. Vue组件传值-父组件向子组件传值

image-20200210233242625

可以从错误提示看到,使用v-bind的传递值都是要在子组件进行定义的,不能直接使用。那么是不是在子组件的data中进行定义呢?

当然不是,子组件有一个特殊的属性props,专门用来定义父组件传递下来的参数,并且传递下来的参数只能是只读。

4.使用props定义父组件传递下来的值

41. Vue组件传值-父组件向子组件传值

image-20200210233559472

浏览器显示如下:

41. Vue组件传值-父组件向子组件传值

image-20200210233750580

显示已经可以正常显示父组件中,传递下来的值了。那么下面来看看,使用props定义的值,能否被修改。

5.修改props定义的值,查看是否会报错

41. Vue组件传值-父组件向子组件传值

image-20200210235256634

浏览器点击之后,如下:

41. Vue组件传值-父组件向子组件传值

image-20200210235329021

41. Vue组件传值-父组件向子组件传值

image-20200210235409906

告警信息如下:

vue.js:634 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "parentmsg"

found in

--->

可以从告警信息看出,的确props定义的值在Vue框架是不需要修改的,只能是只读。

那么反过头来看,子组件中可读可写的数据只有是data定义出来的值才可以。

更多精彩原创Devops文章,快来关注我的Devops社群吧:

41. Vue组件传值-父组件向子组件传值

41. Vue组件传值-父组件向子组件传值

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

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

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

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

(0)
blank

相关推荐

  • SQL Server数据库分区分表

    SQL Server数据库分区分表当一个数据表的数据量达到千万级别以后,每次查询都需要消耗大量的时间,所以当表数据量达到一定量级后我们需要对数据表水平切割。水平分区分表就是把逻辑上的一个表,在物理上按照你指定的规则分放到不同的文件里,把一个大的数据文件拆分为多个小文件,还可以把这些小文件放在不同的磁盘下。这样把一个大的文件拆分成多个小文件,便于我们对数据的管理。下面我们来创建表分区代码创建分区表添加文件组代码格式:…

  • aero是什么意思啊_自动驾驶视觉算法

    aero是什么意思啊_自动驾驶视觉算法数据集介绍aeroscapes数据集下载链接AeroScapes航空语义分割基准包括使用商用无人机在5到50米的高度范围内捕获的图像。该数据集提供3269张720p图像和11个类别的真实掩码。数据加载dataloder写法(基于pytorch)由于该数据集提供了掩码图,因此不需要进行掩码图转换。下载完成后,文件结构如下:ImageSets文件夹:存放了两个txt文件,划分了训练集和验证集。JPEGImages文件夹:存放了RGB图像。SegmentationClass

  • 如何测试硬盘软件,win10系统怎么用硬盘检测工具HDTune【图文】「建议收藏」

    如何测试硬盘软件,win10系统怎么用硬盘检测工具HDTune【图文】「建议收藏」HDTune是一款专业的硬盘检测工具,虽然占用内存不大,但是能够全面的检测硬盘的传输速度、温度以及健康状况等。很多新手用户可能并不知道HDTune怎么用,对此,小编特意去整理win10系统硬盘检测工具HDTune的使用方法。具体方法如下:1、HDTune使用方法很简单,打开HDTune硬盘检测工具后我们可以选择硬盘,在主界面就可以看到硬盘的温度;2、在HDTune硬盘检测工具右侧选择读取或者写入,…

  • mysql 左连接 自连接 例子

    mysql 左连接 自连接 例子连接就是将两个表按照某个公共字段来拼成一个大表。左连接就是在做连接是以左边这个表为标准,来遍历右边的表。例子:用户访问记录:问题:查出看了湖南卫视但没有看北京卫视的用户信息逻辑:先通过左连接将看了湖南卫视和北京卫视的查出来,然后再将看了湖南卫视但不在刚才查出的结果中的用户查出来。SELECT*FROMtest_visitWHEREchannel=’

  • 知识图谱入门 【七】- 知识推理

    知识图谱入门 【七】- 知识推理知识推理任务分类所谓推理就是通过各种方法获取新的知识或者结论,这些知识和结论满足语义。其具体任务可分为可满足性(satisfiability)、分类(classification)、实例化(materialization)。可满足性可体现在本体上或概念上,在本体上即本体可满足性是检查一个本体是否可满足,即检查该本体是否有模型。如果本体不满足,说明存在不一致。概念可满足性即检查某一概念的可满足性,即检查是否具有模型,使得针对该概念的解释不是空集。上图是两个不可满足的例子,第一个本体那个是…

发表回复

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

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