Call method from another composents

Question

I have two child components and I would like to call a function that is in child component 1 from child component 2, I have tested several methods but I haven't found anything that works.

Do I have to go through the parent to use the function? Otherwise here is my code

Tools - parent

<template>
    <div>
        <VariablesChanger/>
        <Console/>
    </div>
</template>

<script>
import Console from '../components/Console'
import VariablesChanger from '../components/VariablesChanger'

export default {
    components: {Console, VariablesChanger},
    data() {
        return {

        }
    }
}
</script>

Sender - Child 1

<template>
    <v-btn color="primary" @click="sendMessageConsole()">Change</v-btn>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        sendMessageConsole() {
            addMessage("Hello")
        }
    }
}
</script>

Console - Child 2

<template>
    <v-card>
        <v-toolbar color="light-blue" dark>
            <v-toolbar-title>Console</v-toolbar-title>
        </v-toolbar>
        <v-list>
            <v-list-item v-for="message in messages" :key="message">
                <v-list-item v-text="message"/>
            </v-list-item>
        </v-list>
    </v-card>
</template>

<script>
export default {
    data() {
        return {
            messages: [],
            date: new Date()
        };
    },
    created () {
    },
    methods: {
        addMessage(msg) {
            this.messages.push("[" + this.date.getHours() +":" + this.date.getMinutes() + "] " + msg)
        }
    }
};
</script>

Thank you in advance for your help.

Answer 1

you can use refs and events to call functions in child component 1 from child component 2 if 2 components have same parent

Tools - parent

<template>
    <div>
        <VariablesChanger @addMessage="showMessage($event)" />
        <Console ref="console" />
    </div>
</template>

<script>
import Console from '../components/Console'
import VariablesChanger from '../components/VariablesChanger'

export default {
    components: { Console, VariablesChanger },
    data() {
        return {}
    },
    methods: {
        showMessage(msg) {
            this.$refs.console.addMessage(msg)
        }
    }
}
</script>

Sender - Child 1

<template>
    <v-btn color="primary" @click="sendMessageConsole()">Change</v-btn>
</template>
<script>
    export default {
        data() {
            return {}
        },
    methods: {
        sendMessageConsole() {
            this.$emit('addMessage', 'Hello')
        }
    }
}
</script>

Console - Child 2

<template>
    <v-card>
        <v-toolbar color="light-blue" dark>
            <v-toolbar-title>Console</v-toolbar-title>
        </v-toolbar>
        <v-list>
            <v-list-item v-for="message in messages" :key="message">
                <v-list-item v-text="message"/>
            </v-list-item>
        </v-list>
    </v-card>
</template>

<script>
export default {
    data() {
        return {
            messages: [],
            date: new Date()
        };
    },
    created () {
    },
    methods: {
        addMessage(msg) {
            this.messages.push("[" + this.date.getHours() +":" + this.date.getMinutes() + "] " + msg)
        }
    }
};
</script>

if 2 child components not in same parent, use EventBus to communicate between 2 components https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860