vue中父子组件传值,解决钩子函数mounted只运行一次的操作


Posted in Javascript onJuly 27, 2020

因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示。

beforCreate(创建之前)

Created(创建之后)

beforMount(载入之前)

Mounted(载入之后)

beforUpdate(更新之前)

Updated(更新之后)

beforDestroy(销毁之前)

Destroyed(销毁之后)

activate(keep-alive组件激活时调用)

deactivated(keep-alive组件停用时调用)

errorCaptured(这个组件的作用是接受子孙组件报错是调用,三个参数 错误对象、错误的组件、错误信息)

父组件向

子组件传值

通过父组件传值调用子组件显示不同的数据

父组件 :conponent.vue

子组件:iconponent.vue

父组件

<template>
 <div>
   <span>父组件</span>
   <icomponent-box :id="this.id"></icomponent-box>
 </div>
</template>
<script>
//导入子组件
import icomponent from './icomponent.vue';
export default {
 data () {
  return {
   id:12
  }
 },
 components:{ //用来注册子组件的节点
   "icomponent-box": icomponent
 }
}
</script>
<style>
</style>

子组件

<template>
 <div>子组件</div>
</template>
<script>
export default {
 updated:{
   this.getComponents();
 },
 mounted:{
  this.getComponents();
 },
 data () {
  return {
  }
 },
 methods:{
  getComponents(){
    this.$http.get("api/getcomponents/" + this.id);
  }
 },
 
 props: ["id"] //接收父组件传递过来的id值
}

</script>

补充知识:Vue父子组件传值,子组件数据只更新一次,之后更改父组件的数据,子组件不再更新

我就废话不多说了,大家还是直接看代码吧~

props:{
  reportInfo:{
    type:Object,
    default:()=>{}
  }
},
data:function(){
	return {
		cityName :' ',
		reportId :' ' ,
	}
}
mounted:function () {
	 var _this = this;
	 
   //初始化获得数据,之后在watch中监听更新
   _this.cityName = _this.reportInfo.cityName;
   _this.reportId = _this.reportInfo.reportId;   
},
watch:{
	reportInfo(newValue, oldValue) {
		var _this = this;
    _this.cityName = newValue.cityName;
    _this.reportId = newValue.reportId;
	}
}

以上这篇vue中父子组件传值,解决钩子函数mounted只运行一次的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
深入学习JavaScript对象
Oct 13 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
原生js的数组除重复简单实例
May 24 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Element Alert警告的具体使用方法
Jul 27 #Javascript
Element Badge标记的使用方法
Jul 27 #Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP新手上路(八)
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
php处理复杂xml数据示例
2016/07/11 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
PHP 实现重载
2021/03/09 PHP
nginx 设置多个站跨域
2021/03/09 Servers
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
JS作用域链详解
2017/06/26 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python自带的IDE在哪里
2020/07/01 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
自习课吵闹检讨书范文
2014/09/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js