做公司网站源代码怎么写网络营销课程培训机构
props , $event 自定义事件，mitt ，
文章目录
前言
不同组件之间传递消息，父子组件通信，props，自定义事件， $event
vue基础介绍了props组件通信 。
一、父子组件通信
1.props父子通信
props是使用频率最高的一种通信方式，常用于 ：父 ↔ 子。
父组件向子组件传递内容，父组件通过template中的子组件标签，添加冒号加要传递的属性向子组件发送内容，子组件通过导入定义defineProps获取父组件发送的属性内容。
父组件发送属性到子组件：（在子组件添加冒号后增加属性名targetPerson 向子组件发送信息）
<Gaspar :targetPerson ></Gaspar>子组件使用 defineProps 接收父组件发送的内容，可直接通过{{ targetPerson }}获取：
// 引入 defineProps import { defineProps } from 'vue';// 接收父组件发送的属性const useGaspar = defineProps(['targetPerson'])子组件向父组件发送信息，可以理解为父组件向子组件发送一个函数请求，子组件执行函数后父组件获取
在父组件中定义一个方法
// 父组件中的方法，将方法参数打印，并将参数赋值给父组件中的响应属性function getGift(GasparGift:string){GasparGifts.value =GasparGiftconsole.log("Gaspar gift is :"+GasparGift)}-------------------------------------------------------------//通过在父组件模板中使用冒号（v-bind）自定义一个名字(:sendGift)与子组件绑定父组件的getGift方法<Gaspar :targetPerson :sendGift="getGift" ></Gaspar>在子组件中获取自定义的名字后，将要传输的属性通过父组件自定义的名字参数传输给父组件
let gift = ref("Gold, frankincense, and myrrh")// 将gift内容传输给父组件，需要通过父组件绑定的自定义的 sendGiftconst useGaspar = defineProps(['gift','targetPerson','sendGift'])// 在子组件模板内容中使用sendGift，将gift作为参数传输给父组件<button @click="sendGift(gift)">sendGift</button>在上文中，父组件自定义命名:sendGift绑定一个函数与子组件联通获取子组件内容，也可以使用另一种方式: 父组件自定义事件（@click="xxx"）， 子组件使用defineEmit接收该事件名，要传输的内容使用emit绑定父组件自定义的事件名。父组件代码：
let child_GasparAddr = ref()
// 父组件要接收的子组件通过方法参数获取后赋值给对应字段function getGasparAddr(GasparAddr:string){child_GasparAddr.value = GasparAddr } -----------------------------
// 父组件 自定义事件 myEvent绑定方法 getGasparAddr
<Gaspar :targetPerson :sendGift="getGift" @myEvent="getGasparAddr" ></Gaspar>子组件相关代码：
//子组件要传输的字符串，通过使用 defineEmits 向父组件传输let GasparAddr = "East knowelege-mainland "子组件使用 defineEmits 获取父组件自定义事件const emit = defineEmits(['myEvent'])----------------------------------------在模板内容中将父组件自定义事件与要传输的内容通过定义的 defineEmits类型绑定传输<button @click="emit('myEvent',GasparAddr)"> myEvent自定义事件</button> 效果如下，父组件为绿色区域，子组件蓝色区域。点击子组件按钮向父组件传输内容：
自定义事件（$event）vue中自定义事件引用需要添加美元符号（$）。event是什么有什么作用：
-
定义
-
当一个事件（如点击、鼠标移动、键盘按键等）在DOM元素上被触发时，浏览器会创建一个
event对象。这个对象包含了与该事件相关的各种信息。 -
例如，在JavaScript中，当为一个按钮的
click事件添加一个监听器时，当用户点击按钮时，相应的click事件被触发，同时会生成一个event对象。 -
不同类型的事件（如
click、mousemove、keydown等）都会有对应的event对象。
-
-
属性和方法
-
属性
-
对于鼠标事件（如
click、mousemove），event对象有clientX和clientY属性，它们表示鼠标指针相对于浏览器视口（viewport）的水平和垂直坐标。 -
对于键盘事件（如
keydown、keyup），有key属性，表示被按下或松开的键的值。 -
还有
target属性，它指向触发事件的DOM元素。例如，如果一个<div>元素被点击，那么在click事件的event对象中，target属性就指向这个<div>元素。
-
-
方法
-
preventDefault()方法是event对象常用的方法之一。它用于阻止事件的默认行为。例如，对于<a>标签的click事件，如果不想让浏览器执行默认的跳转行为，可以在事件处理函数中调用event.preventDefault()。 -
stopPropagation()方法用于阻止事件冒泡。当一个DOM元素嵌套在另一个DOM元素内部时，事件会从最内层元素向外层元素冒泡（例如，一个<button>在一个<div>内部，点击<button>时，<button>的click事件会先触发，然后<div>的click事件也可能会触发）。如果在<button>的click事件处理函数中调用event.stopPropagation()，那么<div>的click事件就不会被触发了。
-
-
作用：
-
获取事件相关信息
-
通过
event对象，可以获取到事件发生时的各种详细信息，从而根据这些信息来编写相应的逻辑。 -
例如，在一个图像缩放的功能中，当鼠标滚轮在图像上滚动时（
mousewheel事件），可以通过event对象的deltaY属性（表示鼠标滚轮滚动的方向和幅度）来确定是放大还是缩小图像。
-
-
控制事件流程
-
利用
event对象的方法（如preventDefault和stopPropagation），可以控制事件的默认行为和传播方式。 -
在表单验证中，如果用户输入不符合要求，在
submit事件处理函数中，可以调用event.preventDefault()来阻止表单的默认提交行为，同时显示错误提示信息给用户，要求用户修正输入内容。
-
-
实现交互逻辑
-
在构建复杂的用户界面交互时，
event对象是必不可少的。 -
比如，在一个可拖放的组件中，通过
mousedown、mousemove和mouseup事件对象中的坐标信息，可以实现元素的拖动效果。
-
2. $refs/$parent 父子通信
$refs用于 ：父→子。$parent用于：子→父。
二、其他方式实现组件通信
1.$attrs 祖孙间接通信
$attrs祖孙间接通信
父组件通过v-bind向子组件传输信息，子组件可以在孙组件引用绑定$attrs转发，父组件绑定内容：
<Gaspar v-bind="{author:'Akagi',storage:999}"></Gaspar>子组件使用$attrs绑定孙组件传输内容（ 孙组件名为</Neon>）：
<Neon :="$attrs"></Neon>孙组件接收祖父内容：
import { defineProps } from 'vue';const grandProps = defineProps(['author','storage'])2. provide/inject直接通信
- 在祖先组件中通过
provide配置向后代组件提供数据 - 在后代组件中通过
inject配置来声明接收数据
// 祖父通过provide将knowelegeBook 内容提供给孙组件
let knowelegeBook = ref("konwelege book ,give you force ! ")provide("bookcontent",knowelegeBook)-----------------------------------------------------//孙组件使用inject获取内容import { inject} from 'vue'let book= inject('bookcontent',"默认book内容")总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。