Vue笔记(props和 mounted)

时间:2021-09-06 09:28:32

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&gt ...

  2. vue &amp&semi; components &amp&semi; props &amp&semi; methods &amp&semi; callback

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

  3. vue &amp&semi; watch props

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

  4. &sol;&sol; mounted&colon; &lbrace;&rcub;&comma; 原来是 空方法 导致了 vue 的警告 !&vert; &lbrack;Vue warn&rsqb;&colon; Error in mounted hook&colon; &quot&semi;TypeError&colon; handlers&lbrack;i&rsqb;&period;call is not a function&quot&semi;

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

  5. Vue笔记目录

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

  6. &lbrack;转&rsqb;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 &amp&semi; modal props &amp&semi; form data update bug

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

随机推荐

  1. Caffe学习系列&lpar;13&rpar;&colon;对训练好的模型进行fine-tune

    使用http://www.cnblogs.com/573177885qq/p/5804863.html中的图片进行训练和测试. 整个流程差不多,fine-tune命令: ./build/tools/c ...

  2. SQL server 表中如何创建索引?

    SQL server 表中如何创建索引?看个示例,你就会了 use master goif db_id(N'zhangxu')is not nulldrop database zhangxugocre ...

  3. GitHub 小试

    GitHub是什么? 它是用来进行版本控制的,就是用来保存项目的地方. 但是项目要是运行,还是需要你本地的环境,它只不过是用来保存代码罢了. GitHub如何操作? 可以通过客户端进行代码提交,更新. ...

  4. What is NicEdit&quest;

    NicEdit - WYSIWYG Content Editor, Inline Rich Text Application   What is NicEdit? NicEdit is a Light ...

  5. knockout 与checkbox联动

    knockout 通过teplate实现简单的代码实现复杂的操作绑定checkbox,代码如下自我感觉很赞!!! 前台HTml <ul data-bind="template: { n ...

  6. 蓝牙连接音响问题(android电视)

    最近老大让我开发电视的蓝牙,由于android电视的蓝牙不稳定和设计上的各种各样的要求,需要在原有的基础上做一些更改,中间遇到了各种问题,在此总结一下. 我们首先要获取blueToothAdapter ...

  7. 【转】python XML 操作总结&lpar;创建、保存和删除,支持utf-8和gb2312&rpar;

    原文地址:http://hi.baidu.com/tbjmnvbagkfgike/item/6743ab10af43bb24f6625cc5 最近写程序需要用到xml操作,看了看python.org上 ...

  8. 高通secury boot过程

    整理内容网盘地址: 链接:https://share.weiyun.com/79c3920b4f2097d93b719b3149a7f3f9 (密码:4jm9cx) 相关内容网站: http://bl ...

  9. 数据处理:2&period;异常值处理 &amp&semi; 数据归一化 &amp&semi; 数据连续属性离散化

    1.异常值分析 异常值是指样本中的个别值,其数值明显偏离其余的观测值.异常值也称离群点,异常值的分析也称为离群点的分析. 异常值分析 → 3σ原则 / 箱型图分析异常值处理方法 → 删除 / 修正填补 ...

  10. CSU 1859 Gone Fishing&lpar;贪心&rpar;

    Gone Fishing [题目链接]Gone Fishing [题目类型]贪心 &题解: 这题要先想到枚举走过的湖,之后才可以贪心,我就没想到这,就不知道怎么贪心 = = 之后在枚举每个湖的 ...