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

本文主要是介绍uniapp组件中的emit声明触发事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

emit解析

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

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

简单使用

---

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

<template><view>子组件<button @click="$.emit('add',123)">按钮</button></view>
</template><script setup>
</script><style lang="scss" scoped>
</style>

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

<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 监听并处理事件。

<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>

<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 等。

1. 创建阶段

   • setup()：这是 Vue 3 的新阶段，用于初始化组件的逻辑。
   • beforeCreate、created：与 Vue 2 类似，分别在实例初始化之后和实例创建完成时调用。

2. 挂载阶段

   • beforeMount、mounted：与 Vue 2 类似，分别在实例即将挂载到 DOM 和实例被挂载到 DOM 后调用。

3. 更新阶段

   • beforeUpdate、updated：与 Vue 2 类似，分别在数据更新前和数据更新后调用。

4. 销毁阶段

   • beforeUnmount、unmounted：Vue 3 中的新钩子，分别在实例销毁前和实例销毁后调用。

---

声明周期钩子:

• 初始化：在组件创建的不同阶段进行初始化操作。
• DOM 操作：在 mounted 钩子中可以安全地进行 DOM 操作。
• 数据监听：在适当的生命周期钩子中添加或移除数据监听器。
• 资源释放：在组件销毁前释放相关资源，比如清除定时器、取消网络请求等。

这篇关于uniapp组件中的emit声明触发事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---