Binding arguments to child functions within Vue components

Question

Binding arguments to child functions within Vue components

When working with React, it's a common practice to bind parameters for child components in the following manner:

<Child onChange={e =>
  doThing(complex.variable.inParentScope[3], e.target.value)} foo="bar" />

In Vue, I want to achieve a similar functionality to ensure that child components remain as simple as possible (just needing to call onClick={(e) => onChange(e)}. However, I've come across information suggesting that passing functions as props is not recommended in Vue. I am struggling to figure out how to bind the arguments from the parent component to make the code reusable. Ideally, I would like to do something like this:

[1,2,3,4,5,dataFromAPI].map(data =>
  <Child change=& quot;e => handleChange(data, foo, e.target.value) />

Can someone provide guidance on how to achieve this?

javascript vue.js

Answer 1

Answer №1

It is perfectly acceptable, in my opinion, to pass a function to a child component. The reason why this may not be commonly seen in Vue is due to the availability of the $emit() method. Here's an illustration:

Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
  template: `<input @change="$emit('some-event', $event.target.value)" />`,
});

new Vue({
  el: '#app',
  data: () => ({
    myList: [1, 2, 3]
  }),
  methods: {
    someFn(item, index, value) {
      console.log({item, index, value});
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <child v-for="(item, index) in myList"
         :key="index"
         @some-event="someFn(item, index, $event)" />
</div>

The child component is designed to be as simple as possible (unaware of list context, index, or parent behavior with emitted values). Its focus is solely on its own value and emitting when necessary.

Keep in mind that $emit() does not bubble. For broader communication needs, consider store dispatching/committing or event bus usage.

Answer 2

It is perfectly acceptable, in my opinion, to pass a function to a child component. The reason why this may not be commonly seen in Vue is due to the availability of the $emit() method. Here's an illustration:

Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
  template: `<input @change="$emit('some-event', $event.target.value)" />`,
});

new Vue({
  el: '#app',
  data: () => ({
    myList: [1, 2, 3]
  }),
  methods: {
    someFn(item, index, value) {
      console.log({item, index, value});
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
  <child v-for="(item, index) in myList"
         :key="index"
         @some-event="someFn(item, index, $event)" />
</div>

The child component is designed to be as simple as possible (unaware of list context, index, or parent behavior with emitted values). Its focus is solely on its own value and emitting when necessary.

Keep in mind that $emit() does not bubble. For broader communication needs, consider store dispatching/committing or event bus usage.

Binding arguments to child functions within Vue components

Answer №1

Similar questions

AngularJS: The art of object pushing

CSS hover effect ceases to function after the button has been clicked once

Issue in Vue/Node application: Rule is restricted to a single resource source

Footer div is being covered by the page

Retrieve anchor elements from multiple HTML documents

Attempting to showcase a PDF document within a web browser

Using an array of references in React

Eliminate JSON data that pertains to dates that are either in the past or future

Two components, one scroll bar, both moving within the same plane

Why is it that despite passing all the unit tests successfully, the function fails when used in its actual context with the same parameters?

Creating a visually dynamic stack of images using javascript, jquery, and HTML

Preventing page re-rendering with redux when a condition is not met

"An error has occurred stating that the header is not defined in

Transmitting the Flag between PHP and JavaScript

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

Is it necessary to compile the React JavaScript project before uploading it to npm?

Creating a minigame using JQuery (Javascript)

Limit the application of the map() function to a single column within a 2-dimensional array in JavaScript when using Find and Replace

Lustrous Layout

Executing multiple click events using JavaScript