vue 两个同级页面中如何调用另一个页面的方法1.新建一个js文件import Vue from 'vue'export default new Vue;2.两个页面中引入此文件import util from '../util'3.如何调用①调用方法页面methonds:{ functionA(){ //函数名字 参数 util.$emit('list','list') }}②别调用方法页面methonds:
vue
两个
不相关的
页面
互相
调用
彼此的
方法
应用场景为 用户存入了
一个
type类型 当存入这个类型的时候 左边的view需要刷新重新获取数据来进行展示
这里不用
两个
vue
的互相
调用
父子
方法
的办法 而是用了
一个
更加简单快捷的
方法
this.$eventBus
A.
vue
页面
调用
B.
vue
页面
下面废话不多说 直接上代码
A.
vue
//在成功以后
调用
此
方法
this.$eventBus.$emit("onclickLists");
B.
vue
//说明:相当于 A.
vue
执行以后会
调用
到 B.
一、使用步骤
1.首先同
一个
vue
实例来
调用
两个
方法
。所以可以建立
一个
中
转站
建立 util.js
中
转站文件（任意位置,我是在/assets/js/util.js）
代码如下：
import
Vue
from '
vue
'
export default new
Vue
2.分别在
两个
页面
引入该文件（注意路径）
代码如下：
import Utils from '../../assets/js/util.js';
3.
调用
方代码
在
vue
前端项目开发时，需要从
一个
页面
中
调用
另
一个
页面
(
同级
组件)
中
的
方法
，这
两个
页面
没有直接的关系，就像是在layout
中
的头部和内容区域的组件，需要在内容区域操作数据后
调用
头部组件
中
的
方法
。
在
vue
中
官方已经给提供解决
方法
了：
下面是我具体的实现
首先创建
一个
工具随便命名，我的是 siblingCall.js
import
Vue
from "
vue
"
export default new
Vue
;
在
两个
同级
页面
都引入定义的工具
首先在需要调别的组件
中
的
方法
的
页面
// 首先引入
<template>
<div class="member-main">
<el-form class="member-form" ref="form" :model="params" label-width="80px">
<el-row>
<el-...
在
Vue
中
，不同的
Vue
组件之间可以通过 props 传递数据，通过 $emit 触发事件来实现通信。如果需要在
一个
Vue
页面
中
调用
另
一个
Vue
页面
的
方法
，可以通过在父组件
中
引入子组件并通过 ref 给子组件起
一个
名字，然后在父组件
中
使用 this.$refs.子组件名.
方法
名() 来
调用
子组件
中
的
方法
。
举个例子，假设有
两个
组件 A 和 B，需要在组件 A
中
调用
组件 B
中
的
方法
fn：
```html
<!-- 组件 A -->
<template>
<button @click="callB">
调用
组件B的
方法
</button>
<B ref="b"></B>
</template>
<script>
import B from "./B.
vue
";
export default {
components: {
methods: {
callB() {
this.$refs.b.fn();
</script>
```html
<!-- 组件 B -->
<template>
</template>
<script>
export default {
methods: {
fn() {
console.log("
调用
了组件B的
方法
");
</script>
在上面的代码
中
，我们在组件 A
中
引入了组件 B，并通过 ref 给组件 B 起了
一个
名字 b。然后在组件 A 的
方法
callB
中
，通过 this.$refs.b.fn()
调用
了组件 B 的
方法
fn。
纯css3 制作loading转圈效果
godflyfly:
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
田淼csdn:
element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题
田淼csdn:
