[JavaScript知识库]vue2中如何跨组件调用方法涉及路由跳转以及实现方式

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页面中的方法，简单记录