Parent-Child Communication in VueJS 2.0: How to effectively pass data from the parent component

Question

Parent-Child Communication in VueJS 2.0: How to effectively pass data from the parent component

Does anyone know a straightforward solution to this issue? I've been struggling to find one.

Within my HTML file, there's a button that looks like this:

<button @click="showModal">Show Modal</button>

By clicking on the button, it triggers the following method:

new Vue({
    el: '#root',
    methods: {
        showModal() { Event.$emit('showModal'); },
    }
});

My goal is to toggle a class in a modal component when the button is clicked. Below is part of the component's code relevant to this functionality:

Vue.component('modal', {

    template: `
        <div :class="[ modalClass, {'is-active' : isActive }]">
            ETC...
        </div>
        `

    data() {
        return {
            isActive: false,
            modalClass: 'modal'
        }
    }

Being new to VueJS, I'm finding it challenging to communicate effectively within Vue. What steps should I take to ensure that isActive becomes true upon clicking the button?

Your input and advice would be greatly appreciated!

Sincerely,

Moshe

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

If you're working in your main.js file (or wherever you initialize your Vue app)

You have the option to utilize a basic vue instance as an eventbus

Vue.prototype.bus = new Vue();

This allows you to use it like this:

this.bus.$on('event', (params) => {})

this.bus.$emit('event', params)

Take a look at one of my vue projects on GitHub for reference, I use the eventbus extensively. https://github.com/wilomgfx/vue-weather

Also, don't miss out on this fantastic free series on VueJS 2, it's really helpful :

Here's a complete example using the original poster's question:

https://codepen.io/wilomgfx/pen/OpEVpz?editors=1010

Answer 2

If you're working in your main.js file (or wherever you initialize your Vue app)

You have the option to utilize a basic vue instance as an eventbus

Vue.prototype.bus = new Vue();

This allows you to use it like this:

this.bus.$on('event', (params) => {})

this.bus.$emit('event', params)

Take a look at one of my vue projects on GitHub for reference, I use the eventbus extensively. https://github.com/wilomgfx/vue-weather

Also, don't miss out on this fantastic free series on VueJS 2, it's really helpful :

Here's a complete example using the original poster's question:

https://codepen.io/wilomgfx/pen/OpEVpz?editors=1010

Answer 3

Answer №2

When it comes to communicating from a parent component to a child component in Vue.js, you can utilize component props.

If the communication needs to go even deeper, where the parent communicates with a nested child component, you can make use of the busEvent method as suggested by @WilomGfx.

Here is an example code snippet for communication from parent to child:

Vue.component('modal', {
        template: '<div :class="[ modalClass, {\'is-active\' : isActive }]">' +
            'Hello Word !' +
        '</div>',
        data() {
            return {
                modalClass: 'modal'
            }
        },
        props: {
            isActive: { type: Boolean, default: false }
        }
    });

    new Vue({
        el: '#root',
        data() {
          return {
            isActive: false,
          }
      },
      methods: {
        showModal() {this.isActive = true },
      }
    });

.is-active {
      color: red;
    }

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root">
  <modal :is-active="isActive"></modal>
  <button @click="showModal">Show Modal (going red when prop isActive is true)</button>
</div>

Answer 4

When it comes to communicating from a parent component to a child component in Vue.js, you can utilize component props.

If the communication needs to go even deeper, where the parent communicates with a nested child component, you can make use of the busEvent method as suggested by @WilomGfx.

Here is an example code snippet for communication from parent to child:

Vue.component('modal', {
        template: '<div :class="[ modalClass, {\'is-active\' : isActive }]">' +
            'Hello Word !' +
        '</div>',
        data() {
            return {
                modalClass: 'modal'
            }
        },
        props: {
            isActive: { type: Boolean, default: false }
        }
    });

    new Vue({
        el: '#root',
        data() {
          return {
            isActive: false,
          }
      },
      methods: {
        showModal() {this.isActive = true },
      }
    });

.is-active {
      color: red;
    }

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root">
  <modal :is-active="isActive"></modal>
  <button @click="showModal">Show Modal (going red when prop isActive is true)</button>
</div>

Parent-Child Communication in VueJS 2.0: How to effectively pass data from the parent component

Answer №1

Answer №2

Similar questions

How can I retrieve the URL of the previous page from the history object in all browsers?

The CORS policy is preventing the AJAX request from functioning properly on localhost

Issue with CSV download box not showing up on Rails version 2.3.11

Can PHP send back data to AJAX using variables, possibly in an array format?

Using PrimeNG checkboxes to bind objects in a datatable

I am encountering an issue where body-parser is not functioning properly with typescript. Whenever I make a request, the request.body is returning as undefined

Is node.js required for utilizing Angularjs?

Updating a table in Javascript after deleting a specific row

Avoid using the JavaScript 'Sys.WebForms..' function if there is no ScriptManager present on the page

angular interpolation:issue arises when inserting URL stored in a variable

Is Redux really the new trend in the world of action creators?

How can I trace the origin of a post request sent from a form?

What is the best way to implement restful instead of query syntax in a $resource factory?

Retrieve the JSON response from the server and store it in variables using jQuery's AJAX function with the `done

Is the Bootstrap Carousel not automatically scrolling when navigating back in Angular?

Webpack referencing incorrect node_modules directory

Confirm the input validity using jQuery for radio buttons, checkboxes, and dropdown menus

Retrieve key codes from inputs sharing the same class

A distinct handler function designed for a dynamically generated form

How can AngularJS utilize ng-repeat and ng-bind-html to display arrays of HTML strings?