问题:
在vue前端项目开发时,需要从一个页面中调用另一个页面(同级组件)中的方法,这两个页面没有直接的关系,就像是在layout中的头部和内容区域的组件,需要在内容区域操作数据后调用头部组件中的方法。
解决:
在vue中官方已经给提供解决方法了:
在这里插入图片描述
下面是我具体的实现
首先创建一个工具随便命名,我的是 siblingCall.js

import Vue from "vue"
export default new Vue;

在两个同级页面都引入定义的工具
首先在需要调别的组件中的方法的页面

// 首先引入 @/utils/siblingCall是我的路径,根据自己的文件所在目录填写路径
import siblingCall from "@/utils/siblingCall";
// 在methods中写一个方法,此方法就可以调用另一个页面中的方法
methods: {
siblingMessage(){
      // TriggerGetMsgNum是事件名字,TriggerGetMsgPara是参数()
      //  也可以没有参数,直接写成siblingCall.$emit("TriggerGetMsgNum");
      siblingCall.$emit("TriggerGetMsgNum","TriggerGetMsgPara");

被调用方法的页面

import siblingCall from "@/utils/siblingCall"; // 在钩子函数中 mounted() { // TriggerGetMsgNum与上面的定义一致,TriggerGetMsgPara函数的参数 // 如果是无参的siblingCall.$on("TriggerGetMsgNum",() => { siblingCall.$on("TriggerGetMsgNum",(TriggerGetMsgPara) => { this.GetMessageNum();

这样就完成了同级(姐妹)组件的方法调用

问题:在vue前端项目开发时,需要从一个页面中调用另一个页面(同级组件)中的方法,这两个页面没有直接的关系,就像是在layout中的头部和内容区域的组件,需要在内容区域操作数据后调用头部组件中的方法。解决:在vue中官方已经给提供解决方法了:下面是我具体的实现首先创建一个工具随便命名,我的是 siblingCall.jsimport Vue from "vue"export default new Vue;在两个同级页面都引入定义的工具首先在需要调别的组件中的方法的页面// 首先引入
在使用Vue框架的时候,有时候需要在Vue页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现。 nextTick:在下次 DOM 更新循环结束之后执行延迟回调。 watch:用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。 之前我是这样子使用nextTick的: mounted:{ this.$nextTick(function(){
vue在同一个组件内; methods一个方法调用methods的另外一个方法 可以在调用的时候  this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法; new Vue({ el: '#app', data: { test:111, methods: { test1:function(){ alert(this.test) test2:function(){ alert("this is test2") alert(this.test)
export default new Vue(); 2.home与alluserList文件为同级文件,home文件使用alluserList文件的方法调用相当于home文件,被调用方为alluserList文件,具体写法如下: 两个页面分别引入间件文件路径: import trans...
由于开发需要,我需要在登录成功请求成功后,调用自定义组件页面一个点击事件方法,让方法立即执行,经过思考后,想出了解决方法,特此记录一下页面关系:登录页跳转到主页,主页有调用自定义组件页面(登录页) 登录页的亮点主要就是在这里,在跳转成功的时候,携带一个布尔值到主页去 主页:调用了自定义组件方法 自定义组件:...
一个vue页面调用其他vue页面方法,可以理解为二步走: ######################**此处为A页面**#################### methods{ start(){ //此处为方法体 ######################**此处为B页面**#################### import A(随便起一个名字,不过最好是A的页面名字) from @XXX/A 2、在page01页面import进刚创建的vue实例,然后在mounted方法里添加监听: 3、在page02页面import进刚创建的vue实例,然后在适当的时候发射: 这样,当page02页面的back方法执行时,Event会发射一个refreshEvent事件,page01页面监听到refreshEvent事件,即可执行page01页面方法
感觉这篇文章写的很清楚简单,分享一下!且这个方法很适合一些没有直接关系的页面之间的函数调用 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关系,看了一下vue的API发现可以用这个方法实现。 https://cn.vuejs.org/v2/api/#vm-on 可以看到需要同一个vue实例来调用两个方法。所以可以建立一个转站。 首先在任意位置新建util.js文件。 import Vu...
vue报错Invalid prop: type check failed for prop “value“. Expected String, Number, got Array 21093