How to $emit some methods -Vue.js [closed]-CodePudding

Looking for a bit of help. I am trying to figure out the syntax/way of writing these methods so the get "$emited" from a child component to a parent component. I haven't really done much in the way of components - any help appreciated.

'''

    methods: {
        filterCaseStudiesByYear: function(allItemsArray) {
        return allItemsArray.filter(item => !item.year.indexOf(this.year))
        },

        filterCaseStudiesByCountry: function(allItemsArray) {
        return allItemsArray.filter(item => !item.country.indexOf(this.country))
        },

        filterCaseStudiesSearch: function(allItemsArray) {
        return allItemsArray.filter(
            item =>
            !item.building_name
                .toLowerCase()
                .indexOf(this.building_name.toLowerCase()),
        )
        },
    },

CodePudding user response：

I recommend you read the Vue docs, first of all. Vue 2 Docs, mind that Vue 3 has a small change which enables you to document event emission a bit better, which you can see here.

It's hard to tell what your exact needs are here as I don't where/what exactly your templates are. I'm assuming that these methods should be called from within a parent though.

The way event emission works is that you have a child component that does something, then emits a certain event up to its parent component. When the parent component picks up that emitted event, the parent then executes another function. In other words, an emit event acts as a trigger in the parent.

A simple example of event emission would be a Modal component. A modal system would be structured similar to this:

Modal Component

<template>
  <!-- When the button is clicked, it emits a `closeModal` event to the parent -->
  <button @click="$emit('closeModal')" />
</template>

Parent Component

<template>
  <button @click="openModal = true" />

  <!-- When the Modal component emits the `closeModal` event, it
       sets the value of openModal to false -->
  <Modal v-if="openModal" @closeModal="openModal = false"
</template>

// In <script setup>
const openModal = ref(false)

If you want a more specific example for your own code, you're going to have to expand your answer and let us know what exactly it is that you're trying to accomplish, since event emission might not even be the answer.

CodePudding user response：

I echo what Sensanaty has said, read the docs on custom events, they're fairly straight forward.

If I assume correctly, you are trying to emit the results of each function when they are called.

In your child component methods you should emit the results with an event name followed by the data.

filterCaseStudiesByYear: function(allItemsArray) {
  const result = allItemsArray.filter(item => !item.year.indexOf(this.year))
  this.$emit('filterByYear', result)
  return result
}

And in your parent component you should listen for the event on the child component and call a method to handle the result (the 'on/@' action should be the same name that is emitted by the child component).

<childComponent @filterByYear="someParentMethod" />

The payload is automatically passed to the method so all you should need to do is define your method and have some params eg.

someParentMethod (payload) {
  console.log(payload)
}