Question

我需要实现以下行为 - ＆gt; 我有简单元素的列表（只是文本）。在元素我把按钮“编辑”，打开编辑元素形式在同一个地方。我在列表顶部有“添加”按钮，打开相同的表单。

我想：当用户点击“添加”或“编辑”其他已打开的表单关闭时。在向服务器发送请求后，表格也会关闭..

抱歉我的英文！）

看起来像是：

列出并添加元素表单：

<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://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

在Vue Js中将事件传播到少数组件实例的最佳方法是什么？

1 个答案: