在我用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作用

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

vue在传值的时候经常遇到的问题的更多相关文章

  1. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  2. vue props传值后watch事件未触发的问题

    父组件传值,子组件监听,明明很简单的一个事情,硬是卡了许久(毕竟不是专业搞前端的,还是吃亏在学识浅陋).也和自己钻牛角尖有关,想自己解决问题. 早期我写过一篇vue组件传值的文章,传值方式是这样的: ...

  3. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  4. 10.4 Vue 父子传值

    简单示例 APP.vue <template> <div> <img :src="imgSrc"> <!-- 父子传值 --> &l ...

  5. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  6. vue页面传值

    第一种情况:例:消息列表页(路由)跳转: methods: { goTo(){ this.$router.push({ name:'/My/Info', query:{ 'tellSeq':this. ...

  7. Vue父子传值

    昨天创建完项目以后,今日首先使用项目来做一个简单的导航栏体会一下Vue的使用 1.项目的结构: 2.首先在Vheader.Vue中编辑代码: <template> <header c ...

  8. vue组件传值

    组件的传值(组件之间的通讯) 1.父子通信 1)父传子 传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据 接收:在子组件内部通过props进行接收 接收的 ...

  9. day 100天 VUE 父子传值,单页面.

     一 .静态资源导入方法 启动服务  npm run serve <template> <div id ="app"> <h3>{{msg}}& ...

  10. Vue 动态传值,Get传值

    Vue 路由get传值1.动态传值 1.1需要在路由配置时指定参数: {component:'/home/:id'} 1.2在routerlink中指定格式:<router-link :to=& ...

随机推荐

  1. WebService之第一天

    1. 定义:webService是一个远程调用技术 远程:相对于本地,不是当前应用服务的.调用:数据交互. 1.1.  业务需求的问题 1.自己想要,但没有

  2. 洛谷 - P1355 - 神秘大三角 - 简单计算几何

    https://www.luogu.org/problemnew/show/P1355 判断一个点和三角形的位置关系,最简单的思路就是用向量. 首先排除掉和三角形顶点重合的情况. 把三角形设计成一个首 ...

  3. Codeforces Round #421 (Div. 2)D - Mister B and PR Shifts(模拟)

    传送门 题意 给出n个数,计算在进行n-1次右移中\(min\sum_{i=1}^nabs(p_i-i)\) 分析 我们设置cnt[p[i]-i]为一个数p[i]与它标准位置(如1的标准位置为1)的左 ...

  4. 图论之最小生成树之Kruskal算法

    Kruskal算法,又称作为加边法,是配合并查集实现的. 图示: 如图,这是一个带权值无向图我们要求它的最小生成树. 首先,我们发现在1的所有边上,连到3的边的边权值最小,所以加上这条边. 然后在3上 ...

  5. jqgrid 分级标题

    参考地址:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar Grouping of the header should ...

  6. josephus 问题的算法(转载)

    Josephus 问题: 一群小孩围成一个圈,任意假定一个数 m,从第一个小孩起,顺时针方向数,每数到第 m 个小孩时,该小孩便离开.小孩不断离开,圈子不断缩小,最后剩下的一个小孩便是胜利者.究竟胜利 ...

  7. .net core区域设置方式

    在Startup中配置 默认路由是这个,并不包含区域路由 routes.MapRoute( name: "default", template: "{controller ...

  8. P1179 数字统计

    题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 2 在数 2 中出现了 1 次,在数 12 中出现 1 次,在数 20 中出 现 1 次 ...

  9. wkWebView 的一些问题

    导语 WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView 拥有60fps滚动刷 ...

  10. React-Native 开发问题整理

    1.内嵌WebView,点击输入框后页面不自动上滚 <activity android:name=".MainActivity" android:label="@s ...