Vue3 - How call function from another component

Question

I start working with Vue3 and created some basic app with adding items to list.

I have two componetnts: ItemList and ItemForm. Both are added to main App.vue component like that:

App.vue - simplified

<template>
  <ItemsList/>
  <ItemForm/>
</template>

In ItemsList I have prop called 'items'. And function addItem() for adding new items to list.

In ItemForm have form and on submit I want send this data from form to ItemsList component to update list view.

I checked few things and nothing works for me (I read that in Vue2 was EventBus which was used for such a situation). I don't wanna also learn some bad way to solve that problems so I ask you for help.

#EDIT

App.vue

<template>
  <div>
    <ItemsList/>
  </div>
  
  <div>
    <ItemForm/>
  </div>
</template>
    
<script setup>
import ItemForm from "@/components/ItemForm";
import ItemsList from "@/components/ItemsList";
</script>

ItemForm.vue

<template>
  <form v-on:submit="addItem">
    <input type="text" v-model="title"/>
    <textarea v-model="description"></textarea>
    <button>Add item</button>
  </form>
</template>
    
<script>
export default {
  data() {
    return {
      title: '',
      description: '' 
    }
  },
  methods: {
    addItem(e) {
      e.preventDefault();
    }
  }
}
</script>

ItemsList.vue

<template>
  <ul>
    <li v-for="item in items">
      <p><b>{{ item.title }}</b></p>
    </li>
  </ul>
</template>
    
<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem: function(item) {
      this.items.push(item);
    }
  },
}
</script>

why are u mixing composition api and options api? just wondering — ericmp, Nov 04 '22 at 14:20
I started learn so that just beginner mistake, canyou explain me what I doing wrong? — Zaki, Nov 04 '22 at 14:57
honestly idk if that is a mistake, cuz idk if its ok to use both apis or if u should stick to one of them. i'd say maybe u should stick to one of them — ericmp, Nov 04 '22 at 15:02
now I notice that I mixed this two approaches :) do you have solution for my problem ? — Zaki, Nov 04 '22 at 15:11
Does this answer your question? [Vue.js - How to call method from another component](https://stackoverflow.com/questions/42990308/vue-js-how-to-call-method-from-another-component) — Mises, Nov 04 '22 at 16:05
@Mises there is no longer $on function in Vue3 - https://v3-migration.vuejs.org/breaking-changes/events-api.html#_2-x-syntax — Zaki, Nov 05 '22 at 06:49

score 1 · Answer 1 · answered Nov 04 '22 at 12:26

You probably should use emits to share the data from the child component to the parent. I have set up a Vue3 Composition API example. Check it out here:

Parent:

<template>
<Comp @send-data="callback" />

<input v-model="myInput" />
</template>

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const myInput = ref('')

const callback = data => myInput.value = data
</script>

Child:

<template>
<button
  @click="btnClicked()"
  v-text="`Click to send data`"
/>
</template>

<script setup>
import { ref } from 'vue'
  
const emits = defineEmits(['sendData'])

const btnClicked = () => emits('sendData', 'some data')
</script>

* If you share some code, we can help you better and write better examples that get near what you want to achieve too.

I guess OP wants some `defineExpose` too, but it's not clear yet for sure. — kissu, Nov 04 '22 at 12:53
@ericmp I added more code to post. I see that you show how share data when we have parent - child relation in my example I think that this wouldn't work right? — Zaki, Nov 04 '22 at 13:42

Zaki · Accepted Answer · 2022-11-10T08:32:41.090

-3

I found solution for my problem: https://pinia.vuejs.org/

Maybe someone will need this info.

Edit

You can use store to manage data across your application

edited Nov 10 '22 at 08:32

answered Nov 04 '22 at 15:56

Zaki

202
1
13

Nope, it won't help anyone. Pinia is a state management library, not a function caller of components. – Mises Nov 04 '22 at 16:03
Yes, but I can use it as a items store – Zaki Nov 04 '22 at 16:52
Because in Vue3 there is no longer $on function and global events are not recomended using stores are solution for sharing data across app – Zaki Nov 10 '22 at 08:31

Vue3 - How call function from another component

2 Answers2

Edit

Linked