Vuejs: Communication among components

To communicate from the parent to the child component, use props. Props are one-way: from parent to child.
Any time the parent changes the prop, the new value is sent to the child and rerendered.
However, you should never mutate a prop inside the child component.
To communicate from the child component to the parent component, use events.

Parent.vue

<template>
    <div>
        <Child :color="green" @clickedChildComponent="handleClickInParent" />
    </div>
</template>
<script>
    import Child from "./Child.vue";
    export default {
        name: "App",
        components: {
            Child,
        },
        data() {
            return {
                color: "white",
            };
        },
        methods: {
          handleClickInParent(parameter1, parameter2) {
          //...
        }
    };
</script>

Child.vue

<template>
    <p>{{ color}}</p>
</template>
<script>
    export default {
    props: {
    color{
    type:String,
    required:true,
    default:'white'
    }
    },
    methods: {
     //some control in child component generating the handleClick event.
     handleClick() {
       this.$emit('clickedChildComponent', parameter1, parameter2)
     }
    },

    }
</script>

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.