首页 > 其他分享 >vue中父子组件调用之头像更新

vue中父子组件调用之头像更新

时间:2023-04-13 09:58:18浏览次数:33  
标签:vue Header getDoctor 更新 头像 然后 组件

问题描述:

修改图像的功能,要实现的功能是这样的:点击确认按钮,然后连带着上面的头像也更新,是不是很简单,只需要一个刷新就行,但是事实上没这么简单,因为我的这个项目涉及到三个组件

 

这里面中间是一个子路由,然后上面是一个组件,左边是一个组件

 

 然后这个就涉及到子父组件传值,

这个总布局是Doctor.vue,上面的是Header_D.vue

子路由里面:

点击确认按钮然后,会触发总页面的refreshDoctor

 

 总页面:

点击之后触发总页面的@refreshDoctor="getDoctor"函数,然后在getDoctor函数中,然后再getDoctor函数中获得更新之后的doctor数组,然后传到Header_D组件中,触发更新

 

 

 

 Header_D组件:

这个组件接收父组件更新的doctor之后

 

 

 

标签:vue,Header,getDoctor,更新,头像,然后,组件
From: https://www.cnblogs.com/lipu123/p/17312245.html

相关文章

  • 界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤
    TelerikUIforASP.NETMVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验。它主要是针对专业级的ASP.NET开发,通过该产品的强大功能,开发者可以开发出功能丰富、适应标准广泛的响应式应用程序。在上文中(......
  • 组件公共状态管理react-redux
    知乎日报项目中,公共状态使用了redux和react-redux,记录学习的知识redux工程化其实就是按模块划分,在开发中能更好的理解和维护,因此该项目将状态管理划分为如下的模块:store用作存放状态管理的文件夹action是store中数据的来源,actions文件夹用来管理派发行为对象的,index......
  • vue路由懒加载
    vue路由懒加载是性能优化考虑的一种策略。假如在router内需要引入一个component文件,importPrevCompfrom'./components/prev-comp'importNextCompfrom'./components/next-comp'这是常规的文件引入方式,这种方式下有用到和没有用到的文件都会被引入,增加资源加载性能消耗......
  • Vue.js 两个新的生命周期钩子(路由组件独有)
    视频11.两个新的生命周期钩子作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。具体名字:activated路由组件被激活时触发。deactivated路由组件失活时触发。>Home.vueNews.vuecomponentsBanner.vue<template> <divclass="col-xs-offset-2col-xs-8"> ......
  • Vue.js 编程式路由导航
    视频>router-link最后会转成标签,有时候页面不是a标签就不能用router-link来写9.编程式路由导航作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活具体编码://$router的两个APIthis.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx ......
  • 记录-vue项目中使用PWA
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言:梳理了一下项目中的PWA的相关用法,下面我会正对vue2和vue3的用法进行一些教程示例,引入离线缓存机制,即使你断网,也能访问页面。一旦用户访问了我们的网页,我们就像牛皮糖一样粘连着他,他永远都可以访问,即使断网也能......
  • vue之Vue-CLI
    目录什么是Vue-CLI为什么要使用Vue-CLI(来自官网)Vue-CLI的安装nodejs下载Vue-CLI常用命令Vue项目相关相关命令目录结构开发规范导入导出语法默认导入导出语法(用得最多)命名导入导出语法导入的简写模式什么是Vue-CLIVueCLI是一个基于Vue.js进行快速开发的完整系统。VueCL......
  • VUE中的插槽使用详解
     <!--什么是插槽?  *插槽就是子组件中的提供给父组件使用的一个占位符,插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。  一般用slot标签来表示插槽要渲染的位置,slot的用法可以分为三类,分别是默认插槽、具名插槽、作用域插槽 ......
  • vue map 从一组对象中得到一个新的对象
    示例数据:letlist=[{id:1,name:"张三"},{id:2,name:"李四"}]1、使用map 取name属性得到一个string数组letarr= list.map(pro=>pro.name);2、使用map得到一个新的对象集合letarr=list.map(pro=>({lable:pro.name,value:pro.id})) ......
  • 基于vue和vite的cesium、cesiumNavigation使用--(1)项目构建及引入
    ​系统信息windows10LTSC21H2vscode:1.77.1nodejs:18.15.0npm:9.5.0版本信息vue:3.2.47vite:4.1.4cesium:1.104.0vue-router:4.1.6默认在以上的js相关版本下构建环境,并包括创建vue项目,创建vue-router文件并构建路由,创建vue视图等等,以上内容不再赘述。如环境和版本不同,则项......