1。业务场景描述A跳到B页面在跳转的时候需要调用B页面中的方法
实现方式
1.使用eventBus全局事件总线的方式实现
a页面中书写 注意需要在销毁时调用
destroyed() {
EventBus.$emit('getData', '')
// 一直没搞明白的东西就是在按钮中触发eventBus会导致传过去数据更改 但是在页面中不会更新的问题
// 通过查询资料得知原来 vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件
// 所以需要在组件销毁之后去传递数据就能实现eventBus跨组件传参去操作别的页面中的方法
}
2.b页面中调用
created() {
EventBus.$on('getData', (val) => {
// 这里接受传递的参数 是空不做任何处理
this.setData()
// 在这里就可以调用本页面中的方法 方法中可以去修改值或者别的逻辑操作
})
},
methods: {
setData() {
this.$nextTick(() => {
// 使用这个包裹之后保证数据改变之后dom刷新
this.data = false
// 执行修改值的操作
})
}
}
b页面中接收参数但是斌没有使用只是在接收时直接调用b页面中的方法
二。使用vuex的方式来实现 基本逻辑和事件总线相差不大
destroyed() {
let data = this.$store.state.data; // 重新赋值
this.$store.commit("setData", !data);
// 原理和eventBus基本一致都需要在销毁后的生命周期函数中调用
// 昨天一直没搞明白的东西就是在按钮中触发eventBus会导致传过去数据更改 但是在页面中不会更新的问题
// 通过查询资料得知原来 vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件
// 所以需要在组件销毁之后去传递数据就能实现eventBus跨组件传参去操作别的页面中的方法
}
同样的在a页面中像mutations中去提交数据刷新状态
在b页面中
computed: {
data() { // 计算属性
return this.$store.state.data; // Vuex 中定义的属性
// vuex是挂载在vue的原型链上的可以直接this访问
}
},
watch: {
data() {
this.btns(); // 需要调用的方法
}
},
methods: {
btns() {
this.data1 = false
// 页面逻辑需要修改的值
}
}
在b页面中监听vuex中的值 如果发生改变则去执行b页面中的方法，简单记录