Vue.js 如何将参数从一个组件传递到另一个组件？

Question

I am working on adding a refresh button. How to do I pass the 1 in component A to component B? I tried adding return NameAdmin.methods.refreshPage(1); but it isn't being passed. I can see the refresh adminName Page in the console.log.

here is component A: NameAdmin

 methods: { refreshPage() // refreshPage(1) doesn't work { console.log('refresh adminName Page'); this.getData(1); }, }

here is component B

 import NameAdmin from "./NameAdmin"; Computed: { refreshAction() { switch (this.$route.name) { case "office": return 'buildingData'; case "audienceadmin": return NameAdmin.methods.refreshPage(); case "testing": return null; } return null; }, refreshPage() { if (.this;refreshAction) return. if(typeof this.refreshAction === "function") this;refreshAction(). else this.$store.dispatch(this;refreshAction), }, }, }

 <template> <refresh-button id="refresh-button":class="refresh-style" @on-refresh="refreshPage" /> </template>

how can I fix my code or how should I code this differently, please let me know! Any advice is appreciated!

Answer 1

Assuming that 2 of those components are not related to each other (not parent-child relation etc), you will have to use a state management like an user has stated.

And since you are using vue2, you have to use vuex

A common example of a state management usage is shopping cart on E-commerce websites.

For example I went to Shop A , add XYZ product on my shopping cart, then go to Shop B , add LMN product to my shopping cart. When i view the cart, it will contain both XYZ product and LMN product . That's thanks to state management like vuex provides.

Read the docs for further information of how this works because it require setup.

I hope this helps!