Vue中一个组件调用其他组件的方法详解(非父子组件)

目录
  • 前言
  • 方式一：引用式
  • 方式二：vuex
    • 1、src/store/index.js
    • 2、被使用组件- A 页面（组件）
    • 3、使用触发页面-B 页面（组件）
  • 方式三：使用事件总线eventBus定义全局事件
    • 1、src/main.js
    • 2、触发页面-B组件/发布事件
    • 3、接收页面-A组件/订阅事件
    • 4、移除事件
  • 总结

前言

Vue中，一个组件调用其他组件的方法（非父子组件）

场景——B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）。

方式一：引用式

1、当前组件引入将要调用方法所属的组件

这里我的当前组件要调用OrderDetail这个组件的check()方法

import Detail from "./detail.vue";

该方法定义在OrderDetail的methods属性中

2、当前组件通过该组件methods属性直接调用该方法

// 也可以调用 created、data等
Detail.methods.check();

方式二：vuex

使用 VueX 定义一个属性 ，然后在A页面 定义一个计算属性（computed） 再把 vuex 的属性返回给它，再监听这个计算属性，发生变化就调用你要执行的方法。

1、src/store/index.js

//  Vuex   全局
state: {
	tableStatus:false
	 	}
 mutations:{
	changeStatus(state,status) {  //  重复赋值
      state.tableStatus = status;
    },
}

2、被使用组件- A 页面（组件）

 //  A 页面（组件）
computed: {
  status() {  //  计算属性
    return this.$store.state.tableStatus; //  Vuex 中定义的属性
  }
},
watch:{
  status() {
    this.getTableList();  //   需要调用的方法
  }
},

3、使用触发页面-B 页面（组件）

然后就是在B 页面定义一个点击事件（举例），重新给 Vuex中的属性赋值就行了

//  B页面（组件）
closePage() {
    let status = this.$store.state.tableStatus;   // 重新赋值
    this.$store.commit("changeStatus", !status);
},

方式三：使用事件总线eventBus定义全局事件

1、src/main.js

 window.eventBus = new Vue();

2、触发页面-B组件/发布事件

window.eventBus.$emit('setFeaturesData', data)  // 带参数
window.eventBus.$emit('setFeaturesData')  // 不带参数

3、接收页面-A组件/订阅事件

    window.eventBus.$on('setFeaturesData', (data)=>{ // 带参数
      this.hoveredFeatures = [data]
      this.onClick()
    })

  mounted() {
    this.getTableData()
    window.eventBus.$on('setFeaturesData', ()=>{ // 不带参数
      this.getTableData()
    })
  },

4、移除事件

window.eventBus.$off('setFeaturesData')

总结

到此这篇关于Vue中一个组件调用其他组件(非父子组件)的文章就介绍到这了,更多相关Vue组件调用其他组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue实现父子组件页面刷新的几种常用方法

    Vue实现父子组件页面刷新的几种常用方法

    目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定

  • Vue父子组件传值的三种方法

    目录 前言 一.Vue父子传值的方法 二.方法详解 1.props / $emit 2.$parent / children 3.$ref 总结 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 例如:Vue的学习是路阻且艰的,这是一个系列文章,帮助vue的新手可以快速上路,创建的自己的项目,该系列文章主要讲解作者在vue学习之路上,创建项目中最重要的知识,因为笔者水平有限,希望大家多多指正,该系列文章旨在让大家感受vue的便捷,详细学习vue希望大家多多观看官方文档. 一

  • Vue3父子组件互调方法的实现

    Vue3父子组件互调方法的实现

    目录 一.父组件调用子组件方法 1.子组件 2.父组件 3.测试结果 4.关于 defineExpose 的官方文档 二.子组件调用父组件方法 1.子组件 2.父组件 3.测试结果 4.关于 defineEmits 的官方文档 下面演示均为使用 setup 语法糖的情况! 一.父组件调用子组件方法 下面演示为使用 setup 语法糖的情况,值得注意的是子组件需要使用 defineExpose 对外暴露方法,父组件才可以调用! 1.子组件 <template> </template>

  • 关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)

    关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)

    目录 1.解决this.$emit无效问题 2.Vuex问题 3.总结 之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是: 1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中. 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化). 3.如果您有Vue

  • vue3自定义组件之v-model实现父子组件双向绑定

    vue3自定义组件之v-model实现父子组件双向绑定

    vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: {      prop: 'value', //3.x默认值改为了modelValue      event: 'input' //3.x默认值改为了update:modelValue    }, //使用 this.$emit('input', index); vue3.x采用以下方式(v-model默认对应的

  • 浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    目录 一.vue2 中 sync 修饰符的功能在 vue3 中如何呈现? 1.sync 修饰符回顾 2.sync 的语法糖功能在vue3中如何编写使用? 二.如何通过v-model实现父子组件的双向数据绑定 1.单个数据双向绑定 2.多个数据双向绑定 - 与单数据绑定差别不大 3.利用 computed 简化父子组件双向数据绑定 一.vue2 中 sync 修饰符的功能在 vue3 中如何呈现? 1.sync 修饰符回顾 1.vue 规则:props 是单向向下绑定的,子组件不能修改 props

  • Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

    Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

    既然有父传子那么肯定有子传父,有子传父肯定也有两者之间相互绑定 这里我们先看一下子传父的写法: 一.子传父:$emit() 看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子传父</title> <script src="https://cdn.jsdelivr.net/npm/vue"></sc

  • vue父子组件动态传值的几种方式及注意问题详解

    1.vue父组件向子组件动态传值的两种方法 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取. 方法有两种, vue父组件向子组件动态传值方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :

  • vue3 父子组件间相互传值方式

    vue3 父子组件间相互传值方式

    目录 vue3父子组件相互传值 父向子传值 子组件向父组件传值 vue3父子组件传值的注意事项 解决办法:两种 vue3父子组件相互传值 父向子传值 父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量 子 export default {     props:['pieData'],     setup(props,ctx) {         const pie_

  • Vue中一个组件调用其他组件的方法详解(非父子组件)

    目录 前言 方式一:引用式 方式二:vuex 1.src/store/index.js 2.被使用组件- A 页面(组件) 3.使用触发页面-B 页面(组件) 方式三:使用事件总线eventBus定义全局事件 1.src/main.js 2.触发页面-B组件/发布事件 3.接收页面-A组件/订阅事件 4.移除事件 总结 前言 Vue中,一个组件调用其他组件的方法(非父子组件) 场景——B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • vue中各选项及钩子函数执行顺序详解

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父

  • vue中keep-alive、activated的探讨和使用详解

    在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来. 百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下. keep-alive <keep-alive>包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们.其是一个抽象的组件,自

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • 详解Angular父子组件通讯

    详解Angular父子组件通讯

    概述 Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来

  • 为Jquery EasyUI 组件加上清除功能的方法(详解)

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • 改变vue请求过来的数据中的某一项值的方法(详解)

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

随机推荐