元素 UI $confirm 不是函数答案

【问题标题】：Element UI $confirm is not a function元素 UI $confirm 不是函数
【发布时间】：2019-08-15 10:54:11
【问题描述】：

从 Vue 调用 Element UI 的 this.$confirm 时，我收到了 Error in v-on handler: "TypeError: this.$confirm is not a function：

也许我没有导入我应该导入的东西（文档和示例表明不需要额外的导入）？

我正在尝试使用 Element UI 构建一个 Vue 应用程序。它有一个表，每行都有一个删除按钮。点击处理程序调用this.$confirm 为用户显示确认对话框。 Element 文档对我来说不是很清楚，但似乎 Element 使用 $confirm 开箱即用地扩展了 Vue 组件。

模板：

<el-table-column label="" width="180">
  <template slot-scope="scope">
    <el-button circle type="danger" @click="beginRemove(scope.row)">
      X
    </el-button>
  </template>
</el-table-column>

脚本：

<script>
import * as API from '../../services/data.js'
import { ElementUI, MessageBox } from 'element-ui'; // ???
export default {
  ...
  methods: {
    beginRemove(item) {            
      this.$confirm(`Do you really want to delete ${ item.fullName } ?`,
        'Confirmation', 
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        })
      ...
    }
  }
}
</script>

依赖项（package.json）：

"dependencies": {
  "element-ui": "^2.6.3",
  "lodash": "^4.17.11",
  "moment": "^2.24.0",
  "regenerator": "^0.13.3",
  "vue": "^2.6.10",
  "vue-moment": "^4.0.0"
},

我正在像这样引导 Vue：

import Vue from 'vue/dist/vue.js';

import {
  ElementUI, // Element is undefined when imported 
  Table, 
  TableColumn,
  Form,
  FormItem,
  Input,
  Button,
  DatePicker,
  Row,
  Col,
  Select,
  Option,
  Pagination
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(require('vue-moment'));
Vue.use(ElementUI);

Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Input.name, Input)
Vue.component(Button.name, Button)
Vue.component(DatePicker.name, DatePicker);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(Pagination.name, Pagination);

import * as NewItem from './components/new-item/new-item.vue';
import * as NamesList from './components/names-list/names-list.vue';
import * as NamesFilter from './components/names-filter/names-filter.vue';
import * as FilterableList from './components/filterable-list/filterable-list.vue';

（故障处理程序位于names-list 组件中...）

【问题讨论】：

你看到这个example了吗？
@SajibKhan 可能是因为我有不同版本的 Vue/Element，在我的情况下，Element 是未定义的，如果我导入 ElementUI，我会得到这个 TypeError: Cannot read property 'install' of undefined

标签： javascript vue.js vuejs2 element-ui

【解决方案1】：

试试这样的代码：

 import { Dialog, Table, TableColumn, MessageBox } from 'element-ui'
 Vue.prototype.$confirm = MessageBox.confirm

【讨论】：

【解决方案2】：

如果我导入 ElementUI，我会得到 TypeError: Cannot read property 'install' of undefined

您的代码错误地将 ElementUI 导入为命名导入。 element-ui 包没有ElementUI 的命名导出，所以它是undefined。默认导入是您将在那里使用的（但这不是您实际需要的）：

//import { ElementUI } from 'element-ui' // DON'T DO THIS
import ElementUI from 'element-ui'
Vue.use(ElementUI)

由于您是单独导入元素（以节省包大小），您应该避免像这样全局导入 ElementUI，因为它会破坏包大小的节省。

Element 文档对我来说不是很清楚，但似乎 Element 使用 $confirm 开箱即用地扩展了 Vue 组件。

docs 声明全局 $confirm 方法仅在像这样完全导入 Element 时可用：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

鉴于您是单独导入元素，您应该改为在组件中本地导入 confirm 方法。即为其confirm方法导入MessageBox：

// MyComponent.vue
import { MessageBox } from 'element-ui'

export default {
  methods: {
    handleDelete(row) {
      MessageBox.confirm(`Do you really want to delete ${row.name} ?`,
        "Confirmation",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning"
        })
    }
  }
}

demo

【讨论】：