Communication from a VueJS parent to its child component

Question

Communication from a VueJS parent to its child component

I am new to VueJS and seeking advice on the most effective approach to use.

Within a parent component, I have multiple child components.

After creating the child components, each one has an event handler attached to it:

this.$parent.$on('save', this.save);

This allows us to call the save method of each child whenever we emit the following in the parent:

this.$emit('save', block);

The issue I am encountering is that every child listening to events from this parent reacts to this event. Is there a more efficient way to ensure only a specific child responds to the parent click event?

javascript vue.js

Answer 1

Answer №1

One approach to consider is passing a prop with the .sync modifier to a child component, where you could then utilize a computed property. However, it's important to understand your specific goal - do you truly need to emit an event for this functionality?

For more information on props in Vue.js, refer to the official documentation: https://v2.vuejs.org/v2/guide/components.html#Props

Answer 2

One approach to consider is passing a prop with the .sync modifier to a child component, where you could then utilize a computed property. However, it's important to understand your specific goal - do you truly need to emit an event for this functionality?

For more information on props in Vue.js, refer to the official documentation: https://v2.vuejs.org/v2/guide/components.html#Props

Answer 3

Answer №2

When tackling your current task, it could be beneficial to utilize a Child Component ref and trigger a method on the child component from the parent:

Vue.component('my-comp', {
  template: "#my-comp-template",
  props: ['name'],
  methods: {
    saveMyComp() {
      console.log('Saved:', this.name);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}]
  },
  methods: {
    saveChild(index) {
      this.$refs.myComps[index].saveMyComp();
    }
  }
});

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2d2e3e1b69756e756a68">[email protected]</a>/dist/vue.min.js"></script>

<div id="app">
  <div v-for="(person, index) in people">
    <button @click="saveChild(index)">saveMyComp</button>
    <my-comp :name="person.name" ref="myComps"></my-comp>
  </div>
</div>

<template id="my-comp-template">
    <span> {{ name }} </span>
</template>

Do keep in mind that the parent is already connected to the child component as it is declared within the template.

Answer 4

When tackling your current task, it could be beneficial to utilize a Child Component ref and trigger a method on the child component from the parent:

Vue.component('my-comp', {
  template: "#my-comp-template",
  props: ['name'],
  methods: {
    saveMyComp() {
      console.log('Saved:', this.name);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}]
  },
  methods: {
    saveChild(index) {
      this.$refs.myComps[index].saveMyComp();
    }
  }
});

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2d2e3e1b69756e756a68">[email protected]</a>/dist/vue.min.js"></script>

<div id="app">
  <div v-for="(person, index) in people">
    <button @click="saveChild(index)">saveMyComp</button>
    <my-comp :name="person.name" ref="myComps"></my-comp>
  </div>
</div>

<template id="my-comp-template">
    <span> {{ name }} </span>
</template>

Do keep in mind that the parent is already connected to the child component as it is declared within the template.

Communication from a VueJS parent to its child component

Answer №1

Answer №2

Similar questions

Efficiently updating database records without the need for page reloads using EJS

JavaScript code to determine if a Rating is enabled for a SharePoint Online list

ERROR: Unable to use import statement outside a module in REACT-APP

What is the best way to adjust the size of an SVG path when zooming in Highcharts?

Validation of dynamically added form fields in React

Encountering an error message that says "ERROR TypeError: Cannot read property 'createComponent' of undefined" while trying to implement dynamic components in Angular 2

Developing React components in TypeScript in a dynamic manner

What can you do to ensure Vue detects input element changes after using preventDefault?

Unable to execute app.get in Express framework of Node.js

Access the value of a JavaScript global variable using Selenium in Python

How to extract the value of an object from an array using jQuery

Retrieving a compilation of items found within text selected by the user on a website

Preventing Text Truncation in THREE.js Texture Created from 2D Canvas

Getting Started with Angular and Express

`returning a functional component directly from a component's event listener`

Swirling hues transforming into #000000 upon second attempt

When using Laravel and Vue in Javascript, the Array Length function may sometimes return an undefined

Error encountered: Cannot load Bootstrap date time picker in MVC due to ReferenceError: $ is not defined

Guide to ensuring every request in an Express.js application contains a cookie

Prevent Jquery nth-child from impacting nested elements