1.mounted

  1.1mounted中使用$nextTick会导致页面挂掉

 mounted() {
// 页面卡死
this.$nextTick(() => {
this.setUrl()
})
}

2.props

  2.1props传过去的值,第一时间在mounted是获取不到的。因为是异步传值的。

  解决方法:(1)使用watch;(2)将需要进行的处理在父组件进行操作,然后将操作完的值直接传给子组件。

 watch: {
datas: function (val) { }
}

(父)
<examAchSearchHeader :exprotUrl="exprotUrl"></examAchSearchHeader>
...
this.exportUrl = XXXX
(子)
props: {
exportUrl: String
}

  2.2通过props传给子组件的值变化后子组件接收到 和 通过refs访问子组件方法中使用接收到的参数变化的顺序问题

  通过refs访问时,接收到的参数是变化前的参数。还是因为异步的问题。可以强制赋值改变,或用watch等。

 // parent
<examAchTable ref="achTable" :dataList="examAchList"></examAchTable> // 若这里不强制赋值一下,在examAchList变化后直接调用子组件的transData方法时,子组件dataList仍是变化前的值
this.$refs.achTable.dataList = this.examAchList
this.$refs.achTable.transData(res.data.totalRecord) // child
transData(total) {
if (this.dataList)
// ...
}

持续更新中...

Vue笔记(props和 mounted)的更多相关文章

  1. Vue笔记之props验证

    使用props 在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子: <!DOCTYPE html> <html> <head> ...

  2. vue & components & props & methods & callback

    vue & components & props & methods & callback demo solution 1 & props & data ...

  3. vue & watch props

    vue & watch props bug OK watch: { // props // chatObj: () => { // // bug // log(`this.chatObj ...

  4. // mounted: {}, 原来是 空方法 导致了 vue 的警告 !| [Vue warn]: Error in mounted hook: "TypeError: handlers[i].call is not a function"

    // mounted: {}, 原来是 空方法 导致了 vue 的警告 !| vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in mounted hook ...

  5. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  6. [转]Vue中用props给data赋初始值遇到的问题解决

    原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...

  7. Vue中用props给data赋初始值遇到的问题解决

    Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论   这篇文章主要介绍了Vue中用props给dat ...

  8. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

  9. vue & modal props & form data update bug

    vue & modal props & form data update bug OK <div> <BindModal :dialogBindVisible=&qu ...

随机推荐

  1. equals方法和==的区别--用实例简单说明

    首先我们创建一个类 public class People { private String name; private String address; public String getName() ...

  2. 题目:python 打印出如下图案(菱形):

    # 题目:打印出如下图案(菱形): # # * # *** # ***** # ******* # ***** # *** # * nu = 1 # 开始值 k = 2 # 变量值 while nu ...

  3. ZJOI2019二轮游记

    Postscript 这个彩笔的省选随心游被中考实验考试坑掉了 所以前两天都一直脱离部队,第一天讲课完了才有的过去 一轮凉了那么二轮翻盘?翻车预定.之后还有上海的ACM没有CXR神仙的ACM窝怎么打啊 ...

  4. 页面结构化在 Android 上的尝试

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/M45DM5Ix7a2fmrsE8VPvxg 作者:b ...

  5. 再谈AbstractQueuedSynchronizer1:独占模式

    关于AbstractQueuedSynchronizer JDK1.5之后引入了并发包java.util.concurrent,大大提高了Java程序的并发性能.关于java.util.concurr ...

  6. Ons 让人欲哭无泪问题,官方介绍不详

      订阅不一致导致消费时成功时失败问题: Console下使用.Net SDK 访问队列成功. Windows 服务下使用.Net SDK 访问队列成功.   有时成功,有时则没有任何反应-   解决 ...

  7. 我的第一个MyBatis

    (1)步骤:1.新建实体类对象---根据数据库字段来设计,有多少字段设多少变量,变量名要字段名一致.   2.新建配置文件config.xml---主要用来获取数据源,里面内容大致需要填写:数据库驱动 ...

  8. 由浅入深讲述MVVM

    相信首次听说MVVM的人,内心都是充满疑惑的!这是个嘛???能干嘛??? MVVM是Model-View-ViewModel的简写.它本质上就是MVC (Model-View- Controller) ...

  9. 学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  10. 使用strace命令跟踪系统调用

    一.是什么strace? strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由 ...