vue3组件通信

子传父$emit

在vue框架中事件分为两种：一种是原生的DOM事件，另外一种自定义事件。

原生DOM事件可以让用户与网页进行交互，比如click、change、mouseenter、mouseleave...

自定义事件可以实现子组件给父组件传递数据。

vue2中的@click绑定的是自定义事件 ，可以通过.native修饰符变为原生DOM事件 。

vue3中绑定的是原生事件，利用defineEmits方法返回函数触发自定义事件，不需要引入，直接使用。

思路：在子组件上面绑定事件，利用defineEmits方法返回函数触发自定义事件，通过$emit将内容传给父组件上绑定的方法，父组件触发事件，将value进行赋值

子组件

<script step>
 const $emit = defineEmits(['dotChange'])
 const handleClick = ()=>{
   //父组件上绑定的方法
 		$emit('dotChange','传递的消息')
 } 
 </script>
<template>
 		<el-button onClick="handleClick">父按钮</el-button> 
 </template>

父组件

<script setup>
 important {ref} from 'vue'
const dot = ref()
 const $emit = defineEmits(['dotChange'])
 const handleClick = (value)=>{
 		dot.value = value
 } 
 </script>
<template>
 		<div dotChange="handleClick">子组件传过来的：{{ dot }}</div> 
 </template>