emit解析
在
uniapp
中,emit
主要用于组件间通信,特别是在子组件需要向父组件或者其他组件发送消息的时候。具体用途包括:
- 子传父数据 :子组件通过
$emit
触发一个事件,并携带参数,父组件监听这个事件并对参数进行处理,从而实现从子组件向父组件传递数据。- 组件间通信:不仅仅限于父子组件之间,也可以用于兄弟组件或者更复杂的组件结构之间的通信。
- 状态管理:通过触发特定事件来更新应用的状态或UI,使得组件可以根据这些事件做出响应。
- 解耦组件:通过事件机制,可以让组件之间不需要直接引用彼此,提高组件的独立性和可复用性。
简单使用
子组件:通过$.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
定义事件:
defineEmits
在函数中使用,返回一个对象,该对象包含了所有可以触发的事件。- 这个对象可以用来触发这些事件,并传递参数。
类型安全:
defineEmits
可以提供类型安全,确保触发的事件和参数类型正确。总结
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
开头,例如onBeforeMount
、onMounted
等。
创建阶段
setup()
:这是 Vue 3 的新阶段,用于初始化组件的逻辑。beforeCreate
、created
:与 Vue 2 类似,分别在实例初始化之后和实例创建完成时调用。挂载阶段
beforeMount
、mounted
:与 Vue 2 类似,分别在实例即将挂载到 DOM 和实例被挂载到 DOM 后调用。更新阶段
beforeUpdate
、updated
:与 Vue 2 类似,分别在数据更新前和数据更新后调用。销毁阶段
beforeUnmount
、unmounted
:Vue 3 中的新钩子,分别在实例销毁前和实例销毁后调用。
声明周期钩子:
- 初始化:在组件创建的不同阶段进行初始化操作。
- DOM 操作 :在
mounted
钩子中可以安全地进行 DOM 操作。- 数据监听:在适当的生命周期钩子中添加或移除数据监听器。
- 资源释放:在组件销毁前释放相关资源,比如清除定时器、取消网络请求等。