CODEWITHSUNDEEP
functionvue.jspropertiesparent
mikasa
mikasa

Reputation: 145

Vue: Pass function into parent component

Okay, I'm new to Vue and trying to simplify my problem as much as I can do. I have two components: NewsItem, NewsItemList

NewsItem:

<template>
  <div>
    <h1>A title</h1>
    <a @click="aFunctionDeclaredInThisComponent">Link</a>
  </div>
</template>

NewsItemList:

<template>
  <NewsItem />
  <div>A mystic box</div>
</template>

I want to show/hide the mystic box in NewsItemList, if the function aFunctionDeclaredInThisComponent is activated, which is in NewsItem. I would like to toggle show/hide with a active state in CSS.

My problem is, I don't know how to pass the function into the parent component. Please note, that I use <script setup>.

Thank you!

Upvotes: 1

Views: 1036

Answers (1)

ericmp
ericmp

Reputation: 2247

Not sure what you are trying to do, but I wrote you a minimal example of how to send data from child component to parent component. Check it out here.

The idea is to emit an event from the child and listen to it in the parent. Don't mind the naming I used, just try to understand how I'm interacting with the data in parent component via child one and try to implement it into your code:

Parent:

<template>
  <Comp @my-var="callback" />
   
  <p
    v-text="`Clicked hide from child? ${test}`"
  />
  
  <div v-show="! test">
    I'm the parent div
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'
const test = ref(false)

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

Child:

<template>
<button
  v-text="'click to hide parent div'"
  @click="doEmit()"
/>
</template>

<script setup>
const emits = defineEmits(['myVar'])

const doEmit = () => emits('myVar', true)
</script>

Upvotes: 2

Related Questions