已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created、mounted生命周期中使用的,只能在beforeUpdated或者updated获取到;

但是如果我们要使用这个数据再获取其他数据并渲染到页面,我们就不能在beforeUpdated或者updated操作,自相矛盾。

这就可以用到Vue的watch方法,先监听子组件获取到的数据,当数据有变化后(也就是数据获取到后),再调用相应的方法。

如下,子组件获取到数据detail,然后要在getTicket方法中使用这个数据,就要在watch中先监听detail的变化,当detail有数据后,再调用getTicket方法,在方法中对数据进行使用

props: {
detail: ''
},
methods: {
async getTicket () {
console(this.detail)
}
},
watch: {
detail () {
this.getTicket()
}
}

关于Vue中,在方法中使用(操作)子组件获取到的数据的更多相关文章

  1. 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

  2. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  3. 【mybatis】service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据【事务的问题】

    问题描述: service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据 ...

  4. ASP.NET中HttpApplication中ProcessRequest方法中运行的事件顺序;ASP.NET WebForm和MVC总体请求流程图

    ASP.NET中HttpApplication中ProcessRequest方法中运行的事件顺序 1.BeginRequest  開始处理请求 2.AuthenticateRequest 授权验证请求 ...

  5. InvocationHandler中invoke方法中的第一个参数proxy的用途

    最近在研究Java的动态代理时对InvocationHandler中invoke方法中的第一个参数一直不理解它的用处,某度搜索也搜不出结果,最后终于在stackoverflow上找到了答案. 这是原文 ...

  6. 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法

    一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...

  7. 解决webkit浏览器中js方法中使用window.event提示未定义的问题

    这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

  8. 问题1:Mybatis 中 Signature中的参数args 问题2:MetaObject中 forObject方法中的参数

    1.@Intercepts({@Signature(type =StatementHandler.class, method = "prepare", args ={Connect ...

  9. vue中.sync修饰符,实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

随机推荐

  1. 问题:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.5.1:compile (default-compile)

    一:问题 今天编译maven 项目构建失败,提示内容如下: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler ...

  2. ISO/IEC 9899:2011 条款6.3.1——算术操作数

    6.3.1 算术操作数 6.3.1.1 布尔.字符以及整数 1.每个整数类型具有一个整数转换等级,如下定义: ——两个带符号的整数类型都不应该具有相同等级,即使它们具有相同的表示. ——一个带符号整数 ...

  3. java中byte数组,二进制binary安装chunk大小读取数据

    int CHUNKED_SIZE = 8000; public void recognizeText(byte[] data) throws InterruptedException, IOExcep ...

  4. videojs改变音量大小

    <audio id=example-video preload="auto" class="video-js vjs-default-skin" type ...

  5. Tips for Conda

    管理环境 创建环境 基于 python3.6 创建一个名为test_py3的环境 conda create -n test_py3 python=3.6 基于 python2.7 创建一个名为test ...

  6. Spring Cloud(7.1):安装Kafka和Redis

    Kafka安装 (1)从官方(http://kafka.apache.org/downloads)下载安装包.kafka安装包和一般安装包的命名方式不一样,我们看一个kafka包命名:kafka_2. ...

  7. CEIWEI CheckSum CRC校验精灵v2.1 CRC3/CRC4/CRC5/CRC6/CRC8CRC10/CRC11/CRC16/CRC24/CRC32/CRC40/CRC64/CRC82/Adler32

    CEIWEI CheckSum CRC校验精灵 是一款通用的循环冗余校验码CRC(Cyclic Redundancy Check).MD5.SHA1.SHA2.SHA3.HAVAL.SHAKE.TIG ...

  8. Xena L23网络测试仪Valkyrie使用技巧100例:修改设备管理IP,设备关机 (编号01)

    Xena Valkyrie产品提供100M~400Gbps全速率接口速率支持 产品链接 https://xenanetworks.com/valkyrie/ 需求# 1.多个用户如何共享使用一个机箱? ...

  9. .git泄露及利用php弱类型松散比较构造json的payload

    一道ctf题,文章搬运到了自己的网站上: http://101.132.137.140:202/archives/2019-11-16

  10. Redis ZSet 有序集合

    有序集合类型与集合类型的区别就是他是有序的.有序集合是在集合的基础上为每一个元素关联一个分数,这就让有序集合不仅支持插入,删除,判断元素是否存在等操作外,还支持获取分数最高/最低的前N个元素.有序集合 ...