Vue.js 从另一个组件调用方法

我有两个子组件，我想从子组件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>

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

从“../components/Console”导入控制台
从“../components/VariablesChanger”导入VariablesChanger
导出默认值{
组件：{Console，variableshanger}，
数据（）{
返回{
}
}
}

寄件人-子女1

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

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

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

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

改变
导出默认值{
数据（）{
返回{
}
},
方法：{
sendMessageConsole（）{
addMessage（“你好”）
}
}
}

控制台-儿童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>

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

安慰
导出默认值{
数据（）{
返回{
信息：[]，
日期：新日期（）
};
},
创建（）{
},
方法：{
添加消息（msg）{
this.messages.push（“[”+this.date.getHours（）+”：“+this.date.getMinutes（）+”]”+消息）
}
}
};

---

提前感谢您的帮助。

如果两个组件具有相同的父组件，则可以使用引用和事件从子组件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>

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

从“../components/Console”导入控制台
从“../components/VariablesChanger”导入VariablesChanger
导出默认值{
组件：{Console，variableshanger}，
数据（）{
返回{}
},
方法：{
showMessage（msg）{
此.$refs.console.addMessage（msg）
}
}
}

寄件人-子女1

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

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

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

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

改变
导出默认值{
数据（）{
返回{}
},
方法：{
sendMessageConsole（）{
这是。$emit（'addMessage'，'Hello'）
}
}
}

控制台-儿童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>

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

安慰
导出默认值{
数据（）{
返回{
信息：[]，
日期：新日期（）
};
},
创建（）{
},
方法：{
添加消息（msg）{
this.messages.push（“[”+this.date.getHours（）+”：“+this.date.getMinutes（）+”]”+消息）
}
}
};

如果两个子组件不在同一父组件中，请使用EventBus在两个组件之间进行通信

---

如果两个组件具有相同的父组件，则可以使用引用和事件从子组件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>

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

从“../components/Console”导入控制台
从“../components/VariablesChanger”导入VariablesChanger
导出默认值{
组件：{Console，variableshanger}，
数据（）{
返回{}
},
方法：{
showMessage（msg）{
此.$refs.console.addMessage（msg）
}
}
}

寄件人-子女1

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

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

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

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

改变
导出默认值{
数据（）{
返回{}
},
方法：{
sendMessageConsole（）{
这是。$emit（'addMessage'，'Hello'）
}
}
}

控制台-儿童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>

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

安慰
导出默认值{
数据（）{
返回{
信息：[]，
日期：新日期（）
};
},
创建（）{
},
方法：{
添加消息（msg）{
this.messages.push（“[”+this.date.getHours（）+”：“+this.date.getMinutes（）+”]”+消息）
}
}
};

如果两个子组件不在同一父组件中，请使用EventBus在两个组件之间进行通信

---

啊，非常感谢，我看到了这种方式，但我不得不做错了！啊，非常感谢，我已经看到了这种方式，但我必须做错事！