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

因为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只运行一次的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2020-07-25

vue 页面回退mounted函数不执行的解决方案

前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这个问题及其解决的方法. 原理 其实这个问题主要涉及到vue生命周期,对vue生命周期理解不够深刻的同学可以去官网学习一下:https://vuejs.org/v2/api/#Options-Lifecycle-Hooks 解决这个问题的关键就在于对keep-alive的理解和activated钩子函

深入理解Vue父子组件生命周期执行顺序及钩子函数

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

vue mounted 调用两次的完美解决办法

在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit  方法导致的 二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三   猜

解决vue项目F5刷新mounted里的函数不执行问题

项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟vue生命周期有关,图就不贴了,直接说原因. 当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立. 因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,

解决vue项目nginx部署到非根目录下刷新空白的问题

1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

解决vue项目刷新后,导航菜单高亮显示的位置不对问题

1本人在学vue项目时遇到一个坑.在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个: 现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态: 捯饬了好久才搞出来,伤的不轻,看控制导航状态的代码部分: 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记

解决vue项目运行提示Warnings while compiling.警告的问题

是因为创建项目的时候设置了eslint所以才会有下面的警告,Use ESLint to lint your code? (Y/n) 这一步选no 如果不想有规范的js代码,可以关掉eslint. 解决办法: 1.找到build下面的webpack.base.conf.js 注释后重启项目 2.或者打开config文件下的index.js,里useEslint改为false,重启项目 补充知识:vue cli3 热更新 保存时自动刷新页面内容 + 分离环境变量.env package.json配置

解决vue 项目引入字体图标报错、不显示等问题

问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

解决vue项目router切换太慢问题

问题定位: 随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时.然后在第一个页面的destroyed周期里面打印日志,发现destroyed->router切换耗时1.5s左右,这时候定位问题是vue的destroyed周期耗时. destroyed周期耗时: 这时候就考虑destroyed为啥要

解决vue项目input输入框双向绑定数据不实时生效问题

我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

解决vue项目中某一页面不想引用公共组件app.vue的问题

Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

Vue项目不能使用localhost:8xx0进入项目,但是将localhost替换为127.0.0.1却可以进入. 解决办法: 进入文件 C:\Windows\System32\drivers\etc\hosts 用记事本打开 hosts 文件进行编辑,看看文件里是否有 127.0.0.1 localhost localhost 127.0.0.1 如果没有的话就加上,具体加入位置如下 # 127.0.0.1 localhost # ::1 localhost //加上的代码 127.0.0.

解决vue项目 build之后资源文件找不到的问题

解决静态资源失效的问题 这就需要修改我们的 config 中的 index.js了,默认的build 中的部分是这样的: build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublic