How can i call a computed function under A component from Component B?

how can i call a computed function under A component from Component B?

read about $emit. It’s help you

Thanks but actually, I want to execute computed function in navbar component. With the emit, I believe I need to import the first component
Under Component A
<button @click=“addtocart” />
addtocart() {
this.$emit(“executeA”);
}
Under Navbar
<ComponentA @executeA=“count”/>

With the above, component a data comes.

can you send code? I don’t understand what you want
For example I did that -


When activescroll change, in component Cart and Compare also change

You can encapsulate the Cart into a separate module. and export a computed property in the module.

example:

export const cart = reactive({
  items: [
    { name: 'tomato', count: 10 },
    { name: 'cheese', count: 20 },
  ]
})
export const totalCount = computed(() => cart.items.reduce((acc, item) => acc + item.count, 0))

Thank you so much for your replies. The reason I was asking because cart number was not getting updated after addto card button. If i go any menu then then cart count changes. Cart count is coming from db through state. I thought if i can call a computed function from navbar where cart count variable is there from addtocart component. However, i could not share code as it is too much lines and all are interlinked because it is connected with store. It was my mistake which I was not updating state in that component in ctx click, infact the state was getting updating from db after rendering thats why cart count was not reflecting.

Thank you again.

Hi @githubissignedup
you can use ‘mitt’ npm module to create emit in any component and use in any other component without worrying about the relationship between the components.
you can create emit in the products page and use it in the navbar section to change the cart number. I have developed a small project as example.

  1. npm install --save mitt

in main.js

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";

const app = createApp(App);

const emitter = mitt();

app.config.globalProperties.emitter = emitter;

app.mount("#app");

in navbar.vue

<template>
  <div class="hello">
    <hr />
    <p>navbar component</p>
    <div class="cart">
      Cart
      <p class="cartCount">{{ cartCount }}</p>
    </div>
    <hr />
  </div>
</template>

<script>
export default {
  name: "Navbar",
  props: {},
  data() {
    return {
      cartCount: 0,
    };
  },
  mounted() {
    this.emitter.on("add-one", () => {
      this.cartCount = this.cartCount + 1;
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.cartCount {
  margin-top: -25px;
  margin-left: 42px;
  color: red;
}
</style>

in other component , Helloworld.vue in my case

<template>
  <div class="hello">
    <h3>Some other component</h3>
    <div class="product">
      <img
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSccE5v4EbgjstoaxRfbnh8mKPS2Gc27tnfS66u32I7lA&s"
        alt=""
      />
      <button @click="add">Add to cart</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    add() {
      this.emitter.emit("add-one");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.product {
  width: 123px;
}
</style>

src code link: nice-aryabhata-twtv5j - CodeSandbox
I hope this helps.

You should use vuex or Pinia for such a thing.