How do I send an emit from a child to a parent when using Vue and <script setup>?

user_125212 0
Viewed 66

I have a simple parent component and child component...

    <script setup>
    import ChildComponent from "...";
    function onAdd(){
      ...
    }
    </script>
    <template>
      <ChildComponent></ChildComponent>
    <template>
    
    <script setup>
    function doSomething(){
      // call onAdd
    }
    </script>
    <template>
    <div>
    <div @click="doSomething></div>
    </div>
    </template>

What I would like to do is call onAdd from the child component. How would I go about doing this?

I tried this (sorry changed from onAdd to refreshRecords)...

//Parent
<script setup>
async function refreshRecords() {
  console.log("Refreshing");
}
</script>
<template>
  <Child :refresh-records="refreshRecords"></Child>
</template>

// Child
<script setup>
const emits = defineEmits(['refresh-records']);
async function onSubmit(){
  ...
  console.log("Emitting");
  emits('refresh-records', {});
}
</script>
<template>
  <q-form @submit="onSubmit" class="q-gutter-md" >
    ...
    <q-btn label="Submit" type="submit" color="primary" />
  </q-form>
</template>

The refresh never gets called but I see the Emitting message

vuejs3
1 Answers

It is something like this:

Parent

<script setup>
import ChildComponent from "...";
function onAdd(val){
  ...
}
</script>
<template>
  <ChildComponent :on-add="onAdd"></ChildComponent>
<template>

Child

<script setup>
defineEmits(['on-add'])
function doSomething(){
  // call onAdd
}
</script>
<template>
<div>
<div @click="$emit('on-add', value)"></div>
</div>
</template>

Or child

<script setup>
const emits = defineEmits(['on-add'])
function doSomething(){
  emits('on-add', value)
}
</script>
<template>
<div>
<div @click="doSomething"></div>
</div>
</template>
user_63102600
Related