从 Vue 中的另一个组件调用组件方法答案

【问题标题】：Invoking a component method from another component in Vue从 Vue 中的另一个组件调用组件方法
【发布时间】：2018-01-15 12:27:18
【问题描述】：

我有 3 个类，分别命名为：Main、Menu、Area 作为 Vue 对象，在 html 中它们的设计如下所示

<div>
    <main>
         <menu :area="area"></menu>
         <area></area>
    </main>
<div>

如上所述，菜单组件使用区域组件作为道具，并且菜单组件中的某些功能正在工作以更改区域组件中的某些内容。我在主类中分配了如下区域属性

import Vue from "vue";
import { Component, Prop } from 'vue-property-decorator';
import Area from "./area.vue";
import Menu from "./menu.vue";

@Component({
    components: {
        Menu,
        Area
    }
})
export default class Main extends Vue {
    constructor() {
        super();
        this.area= new Area();
    }
    area: area;
}

但是，当我单击菜单中的按钮时，它应该在 html 上更改区域组件的属性（实际上是在更改）。也许是因为在构造函数中实例化区域正在创建两个不同的实例，这就是答案。但我不知道如何将它们用作单个对象

谢谢

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

我不确定我是否理解正确，因为缺少一些代码。但通常，当您与父组件通信时，这是通过events 完成的，您不应该直接操作父组件的对象状态。见the documentation。当你有一个 non-Parent-Child Communication 时，你应该使用一个简单的 Vue 实例作为 Bus。

【讨论】：