当前位置：首页 > news >正文

vue 4 组件通信

news 来源：原创 2025/5/29 23:34:11

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 =GasparGift
  console.log("Gaspar gift is :"+GasparGift)

}

-------------------------------------------------------------

//通过在父组件模板中使用冒号（v-bind）自定义一个名字(:sendGift)与子组件绑定父组件的getGift方法

  <Gaspar :targetPerson :sendGift="getGift" ></Gaspar>

在子组件中获取自定义的名字后，将要传输的属性通过父组件自定义的名字参数传输给父组件

 let gift = ref("Gold, frankincense, and myrrh")
    // 将gift内容传输给父组件，需要通过父组件绑定的自定义的 sendGift
    const 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内容")