首页 > 其他分享 >vue中兄弟组件方法互相调用 子组件调用子组件内的方法

vue中兄弟组件方法互相调用 子组件调用子组件内的方法

时间:2022-11-18 09:46:44浏览次数:51  
标签:调用 方法 refs vue 组件 popupVote open

使用this.$refs方法,如果直接用无法调取到 可以先打印出来看一下结构 有时候需要加[0],如下:

 

 

两个子组件:

<ads-banner-vote ref="bannerVote" @openVote="openVote"/> //组件1

<PopupVote ref="popupVote" @cancel="cancelVote"/>   //组件2

----------------------------------------------------------------------

js部分:

openVote(){
  this.$refs.popupVote.open();//.open('top')
},

cancelVote(){
  this.$refs.bannerVote[0].cancelVote()
  this.$refs.popupVote.close()
},

标签:调用,方法,refs,vue,组件,popupVote,open
From: https://www.cnblogs.com/dy-gf/p/16902160.html

相关文章

  • 记一场vue面试
    Vue修饰符有哪些事件修饰符.stop阻止事件继续传播.prevent阻止标签默认行为.capture使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行......
  • uniapp 手动引用组件
    1.官网下载https://ext.dcloud.net.cn/?cat1=2&cat2=21https://uniapp.dcloud.net.cn/component/2.把代码放到项目\components\uni-data-checkbox文件下3.在需要......
  • vue 路由传参
    1.路由传参两种方式params方式query方式 params方式需要占位   query方式不需要 ......
  • 在Vue中使用Canvas绘制动态背景
    好家伙, 发现了,在created(){}钩子函数中使用canvas画布貌似是错误的行为 vue中canvas的使用-掘金(juejin.cn) 于是我们琢磨一下 找到cancas元素;创建cont......
  • Vue-router 的简单应用
    一、基本路由。1、引入vue.js。<scripttype="text/javascript"src="../vue/vue.js"></script>2、引入核心的插件vue-router。<scripttype="text/javascript"s......
  • 使用路由元信息 全局控制显示隐藏路由组件
    1.在路由中配置自定义属性  2.在使用页面组件中 用$route.meta.show 是否为true判断组件显示或隐藏下面为例      3.示例 ......
  • vue后台管理系统"批量删除"书写逻辑
    先上代码: 首先在整体el-table表格中添加@selection-change="SelectTableList"点击事件,这个主要的作用就是当表格被点击时,会调用这个函数;  然后再表格el-table......
  • Nuxt 3.0 稳定版正式发布,基于 Vue 3 的 Web 框架
    Nuxt是使用简便的Web框架,用于构建现代和高性能的Web应用,可以部署在任何运行JavaScript的平台上。Nuxt3.0今天正式发布了稳定版,3.0基于Vue3,为TypeScript......
  • vue 项目源码映射失败问题解决
    目录vue项目源码映射失败问题解决前言解决方案效果参考vue项目源码映射失败问题解决前言不知何时起,项目控制台调试进入源代码变成编译后的文件了,调试起来十分不便,强迫......
  • [Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL'
    今天在使用Vue进行文件上传的代码编写时,发现报错:[Vuewarn]:Errorinv-onhandler:"TypeError:Failedtoexecute'readAsDataURL'on'FileReader':parameter1is......