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

如果2个组件具有相同的父代，则可以使用refs和event从子组件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个子组件不在同一父组件中，请使用EventBus在2个组件之间进行通信 https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

来自其他组件的调用方法

1 个答案: