zoukankan      html  css  js  c++  java
  • vue在传值的时候经常遇到的问题

    在我用vue编写程序的时候,在传值的时候,经常会遇到些问题,像今天遇到了两个问题,在用父传子的方法去传值,当父组件中的要传的数据是for循环出来的或者是列表的时候,你想每次运行的事件,都去传某一行,或者某部分数据的时候,在子组件中用mounted(){},去加载并显示在页面上,还有就是在父传子中,把数据传过来了,但你运行事件的时候,哪个穿过来的数据值没有运行。

    这里就涉及到了两个问题,一个就是生命周期的问题,另外一个就是异步的问题

    向我第一个问题中,生命周期的问题,当我父传子的时候,我传过来的数据在mounted中运行后,就相当与这个生命已经走向了了结束了。当你在去让别的值传进来,他显示的数据也同样不会发生变化,因为他的生命已经结束了,那怎么让他的生命在活过来呢?这就需要用到我们的监听了,监听这个数据后,让生命起死回生

    watch:{
            父组件传过来的值:function(){
                this.运行加载事件()
            }
        },

    加入这个监听后,就能让你传不同的数据,在子组件中显示不同的数据了。

    来再说下第二个问题,异步问题,什么叫异步,异步就是同时加载数据,同时加载的时候这时候就有坑了,大家要小心了。我的代码是这样写的

    props: [
                    'app'
            ],
        mounted() {
            this.gettext()
        },
        methods: { 
            //显示数据       
            gettext: function() {
               console.log(this.app)                    
            }
    }

    这样写也不能说错对吧,但大家都知道mounted是组件加载完后在去加载他自己的,但prop比mounted加载的还要慢上一部所以我们这要去解决下异步的问题,这里我就放一个我常用的解决方案

     props: [
               'app'
            ],
        mounted() {
            this.gettext()
        },
        methods: { 
            gettext: function() {
                setTimeout(() => {
                  console.log()
                 }, 300)
            },

    这就是解决方案,加上一个定时器setTimeout他的时间最好在500以内,因为一个正常网页加载的速度差不多就是500ms作用

    以上是我个人遇到的问题,并加以理解,可能有些地方我理解的有些偏差,但希望如果有遇到这些问题的人能够用着种方法去解决,并希望大神们,多多指教。

  • 相关阅读:
    安装pip-9.0.1-py2.py3-none-any.whl
    Flask-Moment本地化日期和时间
    在windows下使用VirtualEnv建立flask项目
    java web中Jdbc访问数据库步骤通俗解释(吃饭),与MVC的通俗解释(做饭)
    java web中cookie的永久创建与撤销
    myeclipse与数据库进行连接(无需写代码进行验证)
    求二维数组最大子数组和
    Java代码实现 增删查 + 分页——实习第四天
    JDBC 数据库连接操作——实习第三天
    Java基础语法实例(2)——实习第二天
  • 原文地址:https://www.cnblogs.com/yishifuping/p/9530531.html
Copyright © 2011-2022 走看看