uniapp组件中的emit声明触发事件

emit解析

uniapp 中,emit 主要用于组件间通信,特别是在子组件需要向父组件或者其他组件发送消息的时候。具体用途包括:

  1. 子传父数据 :子组件通过 $emit 触发一个事件,并携带参数,父组件监听这个事件并对参数进行处理,从而实现从子组件向父组件传递数据。
  2. 组件间通信:不仅仅限于父子组件之间,也可以用于兄弟组件或者更复杂的组件结构之间的通信。
  3. 状态管理:通过触发特定事件来更新应用的状态或UI,使得组件可以根据这些事件做出响应。
  4. 解耦组件:通过事件机制,可以让组件之间不需要直接引用彼此,提高组件的独立性和可复用性。

简单使用


子组件:通过$.emit(函数名,值)向父组件传递一个数据

javascript 复制代码
<template>
	<view>
		子组件
		<button @click="$.emit('add',123)">按钮</button>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

父组件:通过子组件的事件名称add并定义名称onAdd(注意:没有括号)进行接收,通过变量e进行接收传递的数据

javascript 复制代码
<template>
	<bdqn-header @add='onAdd'></bdqn-header>
</template>

<script setup>
	var onAdd = (e) => {
		console.log(e);
	}
</script>

什么是 defineEmits

  1. 定义事件

    • defineEmits 在函数中使用,返回一个对象,该对象包含了所有可以触发的事件。
    • 这个对象可以用来触发这些事件,并传递参数。
  2. 类型安全

    • defineEmits 可以提供类型安全,确保触发的事件和参数类型正确。
  3. 总结

  • defineEmits 用于定义组件可以触发的事件。
  • 通过 emits 对象触发事件,并传递参数。
  • 父组件或其他组件可以通过 @add 监听并处理事件。
javascript 复制代码
<template>
	<view>
		子组件
		<button @click="onclick">按钮</button>
	</view>
</template>

<script setup>
	var emit = defineEmits(["num","sum"])
	var onclick=()=>{
		emit("num",15151)
		emit("sum",6666)
	}
</script>

<style lang="scss" scoped>
</style>
javascript 复制代码
<template>
	<bdqn-header @num='mynum' @sum='mysum'></bdqn-header>
</template>

<script setup>
	var mynum = (e) => {
		console.log(e);
	}
	var mysum = (e) =>  {
		console.log(e);
	}
</script>

vue3生命周期:创建->挂载->更新->销毁

Vue 3 的生命周期钩子与 Vue 2 类似,但在 Composition API 中,钩子名称略有不同,以 on 开头,例如 onBeforeMountonMounted 等。

  1. 创建阶段

    • setup():这是 Vue 3 的新阶段,用于初始化组件的逻辑。
    • beforeCreatecreated:与 Vue 2 类似,分别在实例初始化之后和实例创建完成时调用。
  2. 挂载阶段

    • beforeMountmounted:与 Vue 2 类似,分别在实例即将挂载到 DOM 和实例被挂载到 DOM 后调用。
  3. 更新阶段

    • beforeUpdateupdated:与 Vue 2 类似,分别在数据更新前和数据更新后调用。
  4. 销毁阶段

    • beforeUnmountunmounted:Vue 3 中的新钩子,分别在实例销毁前和实例销毁后调用。

声明周期钩子:

  • 初始化:在组件创建的不同阶段进行初始化操作。
  • DOM 操作 :在 mounted 钩子中可以安全地进行 DOM 操作。
  • 数据监听:在适当的生命周期钩子中添加或移除数据监听器。
  • 资源释放:在组件销毁前释放相关资源,比如清除定时器、取消网络请求等。
相关推荐
guai_guai_guai30 分钟前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~6 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端10 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86810 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦18 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app