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 检测浏览器类型和版本的代码
Sep 15 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
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
无限级别菜单的实现
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
python基础教程之匿名函数lambda
2017/01/17 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python requests.get带header
2020/05/05 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
升职自荐信
2013/11/28 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
公司禁烟通知
2015/04/23 职场文书
个人维稳承诺书
2015/05/04 职场文书
运动会入场词
2015/07/18 职场文书
事业单位岗位说明书
2015/10/08 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python