从其他组件调用方法

Question

我有两个子组件，我想从子组件 2 调用子组件 1 中的函数，我测试了几种方法，但没有找到任何可行的方法。

我必须通过父母才能使用该功能吗？否则这是我的代码

工具 - 父级

<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>

发件人 - 孩子 1

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

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

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

控制台 - 子 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>

提前感谢您的帮助。

Answer 1

如果两个组件具有相同的父组件，您可以使用 refs 和事件从子组件 2 调用子组件 1 中的函数

工具 - 父级

<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>

发件人 - 孩子 1

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

控制台 - 子 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>

如果 2 个子组件不在同一个父组件中，则使用 E​​ventBus 在 2 个组件之间进行通信 https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860