确认对话框中的Element-ui $emit无效

Question

我试图从父页面获取子页面发送的请求，但没有成功。有人能帮我吗，谢谢。

1.父代码

<do-more @onreloadtab="reloadTab" :selectFolder="selectFolder"></do-more>
methods: {
  reloadTab: function() {
    console.log('reload')
  }
}

2.子代码

<template>
  <span class="do-more">
    <el-dropdown size="mini" @visible-change="dropdownChange($event)" 
      @command="dropdownCommon($event)" >
      <span class="el-dropdown-link">
        <el-button size="mini" type="text" icon="el-icon-more" 
          class="triggleBtn"></el-button>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="delete">del</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </span>
</template>

methods: {
  delete: function(row) {
    let that = this
    this.$confirm("Are you sure to delete?", "confirm")
      .then((config) => {
        that.$emit('onreloadtab')
      })
      .catch(() => {});
  }
}

Answer 1

将您的代码更改为：

<template>
  <span class="do-more">
    <el-dropdown size="mini" @visible-change="dropdownChange" 
      @command="dropdownCommon" >
      <span class="el-dropdown-link">
        <el-button size="mini" type="text" icon="el-icon-more" 
          class="triggleBtn"></el-button>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="delete">del</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </span>
</template>

methods: {
  dropdownCommon(command) {
    if(command === 'delete'){
      this.$confirm("Are you sure to delete?", "confirm")
      .then((config) => {
        this.$emit('onreloadtab')
      })
      .catch(() => {});
    }
    // other command
  }
}

当下拉项el-dropdown-item被单击时，el dropdown的@command事件从el-dropdown-item接收command属性值。

您还可以在el-dropdown-item上使用@click事件，而不是command属性。