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作用
以上是我个人遇到的问题,并加以理解,可能有些地方我理解的有些偏差,但希望如果有遇到这些问题的人能够用着种方法去解决,并希望大神们,多多指教。
vue在传值的时候经常遇到的问题的更多相关文章
- vue路由传值params和query的区别
vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...
- vue props传值后watch事件未触发的问题
父组件传值,子组件监听,明明很简单的一个事情,硬是卡了许久(毕竟不是专业搞前端的,还是吃亏在学识浅陋).也和自己钻牛角尖有关,想自己解决问题. 早期我写过一篇vue组件传值的文章,传值方式是这样的: ...
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- 10.4 Vue 父子传值
简单示例 APP.vue <template> <div> <img :src="imgSrc"> <!-- 父子传值 --> &l ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue页面传值
第一种情况:例:消息列表页(路由)跳转: methods: { goTo(){ this.$router.push({ name:'/My/Info', query:{ 'tellSeq':this. ...
- Vue父子传值
昨天创建完项目以后,今日首先使用项目来做一个简单的导航栏体会一下Vue的使用 1.项目的结构: 2.首先在Vheader.Vue中编辑代码: <template> <header c ...
- vue组件传值
组件的传值(组件之间的通讯) 1.父子通信 1)父传子 传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据 接收:在子组件内部通过props进行接收 接收的 ...
- day 100天 VUE 父子传值,单页面.
一 .静态资源导入方法 启动服务 npm run serve <template> <div id ="app"> <h3>{{msg}}& ...
- Vue 动态传值,Get传值
Vue 路由get传值1.动态传值 1.1需要在路由配置时指定参数: {component:'/home/:id'} 1.2在routerlink中指定格式:<router-link :to=& ...
随机推荐
- 百度也推出公共DNS服务:180.76.76.76(转载)
转自:http://www.cnbeta.com/articles/352221.htm
- C++开发工程师面试题库 1~50道
1. 指出以下变量数据存储位置 全局变量int(*g_pFun)(int);g_pFun=myFunction;g_pFun存储的位置(A ) 为全局的函数指针 指向空间的位置( B) 所有函数 ...
- hdoj5698
果然以前不想搞的东西,今天他妈全来了,我要爆炸,除了说操....真是欲哭无泪啊..... //这道题目卡在逆元了.... //利用逆元计算1/(n!(m-n)!) //对于正整数a,m如果有ax≡1( ...
- bzoj 1076: [SCOI2008]奖励关【状压dp+概率dp】
设f[i][s]为前i步,选的礼物集合为s的方案数,然而并不会转移-- 看了hzwer的blog,发现要倒着转移,然后答案就是f[1][0] 妙啊 #include<iostream> # ...
- bzoj 4240: 有趣的家庭菜园【树状数组+贪心】
以为是逆序对数-- 实际上,原数组移动若干次后我们会得到一个新的下标序列,需要的移动次数是这个新下标序列的逆序对数 然后我们要让这个最小,考虑贪心先按h把下标排一遍序,然后每次询问到一种值的时候,对每 ...
- P4141 消失之物(背包)
传送门 太珂怕了……为什么还有大佬用FFT和分治的…… 首先如果没有不取的限制的话就是一个裸的背包 然后我们考虑一下,正常的转移的话代码是下面这个样子的 ;i<=n;++i) for(int j ...
- 如何访问google?
1:浏览器打开 uzer.me 网站(建议:火狐,不行就谷歌) 2:点击注册,注册一个账号 3:登录账号,进入如下界面,选择火狐浏览器 4:这样就可以进行国外的网站访问了
- mysql架构解析
架构 mysql是cs架构,在服务端可以启动该mysqld服务,mysqld进程默认监听在tcp:3306.在客户端使用命令行工具mysql或者图形化工具navicat for mysql进行远程连接 ...
- MySQL、SqlServer、Oracle三大主流数据库分页查询 (MySQL分页不能用top,因为不支持)
一. MySQL 数据库 分页查询MySQL数据库实现分页比较简单,提供了 LIMIT函数.一般只需要直接写到sql语句后面就行了.LIMIT子 句可以用来限制由SELECT语句返回过来的数据数量,它 ...
- php输出中文字符
中文字符不可以使用imagettftext()函数在图片中直接输出,如果要输出中文字符,需要先使用iconv()函数对中文字符进行编码,语法格式如下:string iconv ( string $in ...