直接上代码

这里没使用脚手架 主要是懒
HTML 页面

<script src="https://unpkg.com/vue@next"></script>
		<div id="app">
			<button-list @click-event="handleClick" />
		</div>

js 代码关键

// 先创建一个Vue实例
	const app = Vue.createApp({
		data() {
			return {
			
			}
		},
		methods: {
			handleClick(e) {
			// 如果组件内部事件校验通过 则会打印 hello word
				console.log(e)
			}
		}
	})
	// 注册一个组件  因为Vue是单向数据流 子组件是无法修改父组件的值  只能通过$emit()方法来实现子组件向父组件传值
		app.component('button-list', {
		template: `<div class="list" @click="eventClick" >按钮</div>`,
		methods: {
			eventClick(e) {
			// 组件内部自定义一个组件用来向父组件传值
				this.$emit('click-event', 'hello word')
			}
		},
		emits:{
			// 事件校验
			'click-event': (e) => {
			// 如果 e == 'hello word' 
				if(e){
					return true
				}else{
				//	 打印错误  返回false 进行拦截 这样就不会在往下执行
					console.error('error')
					return false
				}
			}
		}
	})
	// 最后别忘了挂载dom
		app.mount("#app")