vue-cli不使用App.vue时组件事件失效及#app报错问题咨询

问题1：$emit触发后testFunction未调用的原因 #

你当前代码里写的render:h => h(MyComponent)会直接覆盖#app节点内你预先写的所有模板内容，你在index.html里给MyComponent绑定的@my-event="testFunction"根本不会生效——render函数生成的是一个全新的未绑定任何事件的MyComponent实例，点击触发的事件自然没有对应处理函数。
解决方法二选一：

• 删掉render函数，用完整版Vue自带的编译器自动解析#app内的模板内容
• 保留render函数的话，手动绑定事件：render: h => h(MyComponent, { on: { 'my-event': this.testFunction } })

问题2：是否可以不用写render和$mount完成组件注册渲染 #

可以。你引入的是带编译器的完整版Vue（vue/dist/vue.js），只要满足两个条件就可以自动渲染：

1. 已经全局/局部注册了要使用的组件
2. Vue实例配置了el: '#app'参数，且#app节点内写好了对应的组件模板
   你只要删掉代码里的render配置和末尾的.$mount('#app')调用即可，Vue会自动编译#app内的模板、完成渲染。

问题3：Cannot find element: #app报错解决 #

报错的核心原因是脚本执行时#app节点还没加载完成，或者重复挂载冲突，按下面步骤修改即可：

• 删掉Vue实例末尾重复的.$mount('#app')调用，你已经在实例配置里指定了el: '#app'，不需要重复挂载
• 如果你是用vue-cli开发，不要手动在index.html里加vue和main.js的script标签，vue-cli构建时会自动注入打包后的资源，手动加的script加了defer反而可能出现加载顺序错乱
• 确认你的index.html里#appdiv写在所有script标签之前，保证脚本执行时节点已经存在

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