解决方法：
定义了两个 Vue.component 在 el 中使用的时候要用 双标签， 用单表标签的时候，只会显示第个 组件间
这样写只显示 welcome-button 组件
<welcome-button @welcome="sayHi"/>
<magic-eight-ball @give-advice="showAdvice"/>
--------------------------------
改成双标签后，就会显示两个组件了。
<welcome-button @welcome="sayHi"></welcome-button>
<magic-eight-ball @give-advice="showAdvice"></magic-eight-ball>
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$emit</title> <script src="node_modules/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <welcome-button @welcome="sayHi"></welcome-button> <magic-eight-ball @give-advice="showAdvice"></magic-eight-ball> </div> <script> /* 注： 定义了两个 Vue.component 在 el 中使用的时候要用 双标签， 用单标签的话，只会显示第一个组件 这样写只显示 welcome-button 组件 <welcome-button @welcome="sayHi"/> <magic-eight-ball @give-advice="showAdvice"/> -------------------------------- 改成双标签后，就会显示两个组件了。 <welcome-button @welcome="sayHi"></welcome-button> <magic-eight-ball @give-advice="showAdvice"></magic-eight-ball> */ /*---------------无参数---------------------*/ Vue.component(‘welcome-button‘, { template: `<button v-on:click="$emit(‘welcome‘)"> 点我 </button>` }); /*-----------------有参数---------------*/ Vue.component(‘magic-eight-ball‘, { data: function () { return { possibleAdvice: [‘Yes‘, ‘No‘, ‘Maybe‘] } }, methods: { giveAdvice: function () { var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length); // console.log( this.possibleAdvice[randomAdviceIndex]); this.$emit(‘give-advice‘, this.possibleAdvice[randomAdviceIndex]) } }, template: ` <button v-on:click="giveAdvice"> 点我出发父组件的方法，并传参 </button>` }) new Vue({ el: ‘#app‘, methods: { sayHi(){ alert(‘Hi!‘); }, showAdvice(advice){ alert(advice) } }, }); </script> </body> </html>