博客

 在使用Vant UI组件进行移动端开发的时候，消息提示通知组件和Toast组件按照官方文档提供的第一种方式使用总是报错，明明全局已经对Vant进行了引用，这是为什么呢？

全局引入方式如下：

import Vue from 'vue';
import Vant from  'vant';
import 'vant/lib/index.css';
import App from './App.vue'
import router from './router'
import store from './store'

Vue.use(Vant);
new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
});

 报错页面如下：

<!--
 * @Descripttion: 
 * @version: 
 * @Author: weiming.liu
 * @Date: 2022-01-21 14:57:37
 * @LastEditors: weiming.liu
 * @LastEditTime: 2022-01-21 17:01:46
-->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <van-button type="danger" @click="testMsg">危险按钮</van-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods: {
    testMsg() {
     Notify({ type: 'danger', message: '通知内容' });
    }
  }
}
</script>

 按照上述写法，在代码进行保存编译的时候就会提示：error: ‘Notify’ is not defined (no-undef) at src\views\Home.vue:28:6:

具体的报错信息如下：

Module Error (from ./node_modules/eslint-loader/index.js):
error: 'Notify' is not defined (no-undef) at src\views\Home.vue:28:6:
  26 |   methods: {
  27 |     testMsg() {
> 28 |      Notify({ type: 'danger', message: '通知内容' });
     |      ^
  29 |     }
  30 |   }
  31 | }

 具体原因不进行分析了，如果感兴趣的小伙伴可以在评论里一起讨论。

解决方法一共有两种，其中第一种是使用全局方法：this.$notify(‘提示文案’)的方式，具体使用方法不细说了，可以去官网查看或者自行百度。

另外一种解决方法是，在全局引用的基础上，在业务页面单独进行局部引用，上述代码修改如下：

<!--
 * @Descripttion: 
 * @version: 
 * @Author: weiming.liu
 * @Date: 2022-01-21 14:57:37
 * @LastEditors: weiming.liu
 * @LastEditTime: 2022-01-21 17:15:36
-->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <van-button type="danger" @click="testMsg">危险按钮</van-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { Notify } from 'vant';

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods: {
    testMsg() {
     Notify({ type: 'danger', message: '通知内容' });
    }
  }
}
</script>

页面效果如下：