vue 3 typescript Uncaught (in promise) TypeError: this.$on is not a function答案

【问题标题】：vue 3 typescript Uncaught (in promise) TypeError: this.$on is not a functionvue 3 typescript Uncaught (in promise) TypeError: this.$on is not a function
【发布时间】：2021-09-16 14:35:33
【问题描述】：

我安装了带有 vue-cli 和 typescript 的全新 Vue 3。一切都在运行但是当我添加一个https://vue-select.org/ 包时我在浏览器控制台上收到此错误

Uncaught (in promise) TypeError: this.$on is not a function
    at Proxy.created (vue-select.js?4a7a:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164)
    at callHook (runtime-core.esm-bundler.js?5c40:3182)
    at applyOptions (runtime-core.esm-bundler.js?5c40:3109)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:7265)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7190)
    at setupComponent (runtime-core.esm-bundler.js?5c40:7117)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5115)
    at processComponent (runtime-core.esm-bundler.js?5c40:5090)

简单示例

Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <vSelect :options="[{label: 'Canada', code: 'ca'}]"></vSelect>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import vSelect from 'vue-select';

@Options({
  components: {
    HelloWorld,
    vSelect
  },
})
export default class Home extends Vue {}
</script>

【问题讨论】：

这个组件好像不支持vue 3
@Boussadjra 是对的，你可以关注 github 上的open ticket。这是在 cmets 中编写的替代 vue next select。

标签： typescript vue.js vuejs3 vue-select

【解决方案1】：

我认为问题与 Vue3 无关。它与打字稿有关。只需添加这个包@types/vue-select。这个包包含vue-select 的类型定义。此外，如果您将 webpack 用于打包程序，请不要忘记添加此包 @types/webpack-env。它包含 webpack 的类型定义。

【讨论】：