vue-c3组件使用问题咨询：Vue未定义报错及事件触发疑问

一、搞定“Vue is not defined”报错 #

你碰到这个错误，基本是Vue版本适配或者导入方式不对导致的，分两种情况处理：

1. Vue 2 项目场景
   如果你的项目用的是Vue 2，先确认有没有在组件里导入Vue：

   import Vue from 'vue'
   

   导入之后再创建handler实例：handler: new Vue()，这样就不会报Vue未定义了。

2. Vue 3 项目场景
   Vue 3已经去掉了全局的Vue构造函数，没法直接new Vue()了。这时候得用createApp来生成一个空的Vue实例当handler：

   import { createApp } from 'vue'
   // 在组件的data或者setup里定义handler
   handler: createApp({}).mount(document.createElement('div'))
   

   这样就能解决Vue未定义的问题，同时满足vue-c3对handler的要求。

二、为什么要用this.handler.$emit('init', options)而非this.$emit #

这是vue-c3组件的设计逻辑决定的：

• vue-c3组件内部并没有监听当前组件（也就是你写的父组件）的init事件，而是专门监听你传入的handler这个Vue实例的事件。
• 这个handler相当于你和vue-c3组件之间的通信桥梁：当你调用this.handler.$emit('init', options)时，是把图表配置传递给vue-c3内部的监听逻辑，触发它根据配置初始化c3图表。
• 如果直接用this.$emit('init', options)，这是向你的父组件发送事件，而vue-c3根本没监听这个，自然不会生效。

说白了，这就是vue-c3组件约定好的配置传递方式，必须通过这个handler实例来触发初始化~

内容的提问来源于stack exchange，提问作者checkthestatistics