在 Vue Js 中将事件传播到几个组件实例的最佳方法是什么?

Question

我需要实现以下行为>我有包含简单元素(只是文本(的列表。在元素中，我放置了"编辑"按钮，该按钮打开编辑元素表单。我在列表顶部有"添加"按钮，可以打开相同的表单。

我想：当用户单击"添加"或"编辑"另一个打开的表单时关闭。在向服务器发送请求后，表单也关闭了。

对不起我的英语！

它看起来像这样：

列出并添加元素形式：

<template>
<el-row>
    <el-col :span="24">
        <el-button type="text" @click="show_add_form = true">Добавить</el-button>
        <edit-dict-element-form 
            v-bind:dict="dictName" 
            v-if="show_add_form"
            v-on:closeAddForm="show_add_form = false">
        </edit-dict-element-form>
    </el-col>
    <el-col :span="24"
        v-for="(element, index) in dict"
        v-bind:key="element.id">
        <dict-element 
            v-bind:element="element"
            v-bind:index="index"
            v-bind:dict="dictName">
        </dict-element>
    </el-col>
</el-row>

元素组件：

<template>
  <div>
    <el-card v-if="!show_edit_form">
       {{element.name}}
       <el-button class="edit-button" type="text" @click="show_edit_form = true">Изменить</el-button>
    </el-card>
    <edit-dict-element-form 
        v-bind:dict="dict" 
        v-bind:edit_element="element"
        v-if="show_edit_form"
        v-on:closeAddForm="show_edit_form = false">
    </edit-dict-element-form>
  </div>
</template>

添加\编辑元素表单：

<template>
    <el-card>
        <el-form :rules="rules" :model="element" label-position="top" ref="AddDictElement">
            <el-form-item label="Введите значение" prop="name">
                <el-input v-model="element.name"></el-input>
            </el-form-item>
        </el-form>
       <el-button type="danger" @click="$emit('closeAddForm')">Закрыть</el-button>
       <el-button type="success" @click="addDictElement">Сохранить</el-button>
    </el-card>
</template>

我只想同时打开一个添加\编辑表单。

Answer 1

您可以使用"事件总线"系统在组件之间进行通信(非父子通信(。

var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
    // ...
})

请看：
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication