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

时间:2019-11-18 01:36:47

标签: vuejs2 element-ui

我试图从父页面获取子页面发送的请求,但未成功。有人可以帮助我,谢谢。

1。父代码

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

2.child代码

<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(() => {});
  }
}

1 个答案:

答案 0 :(得分:0)

将代码更改为:

<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时,@command的{​​{1}}事件从el dropdown接收command属性值。

您还可以使用el-dropdown-item事件代替@click上的command属性。