mint-ui 弹窗问题

Question

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

<template>
  <div class="hello" >
    {{msg}}
    <my-component></my-component>
    <Header></Header>
    <mt-button @click="handleButtonClick">Click Me</mt-button>
  </div>
</template>
<script>
import Header from './header.vue'
var Child = {
  template: '<div>Asssz custom component!</div>'
}
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    // 只能在父级模板中使用 <my-component>
    'my-component': Child,
    Header
  },
  methods: {
    handleButtonClick: function () {
      MessageBox('提示1', '操作成功1')
    }
  }
</script>

编译报错

 http://eslint.org/docs/rules/no-undef  'MessageBox' is n
ot defined
  src\components\HelloWorld.vue:28:7
        MessageBox('提示1', '操作成功1')

这么写点击按钮弹不出提示框，为什么呢

Answer 1

import { MessageBox } from 'mint-ui';

Answer 2

调用this.$messagebox