Vue2&3组件自定义事件和解绑事件

最新推荐文章于 2024-06-17 23:19:47 发布

南瓜骨头

最新推荐文章于 2024-06-17 23:19:47 发布

阅读量1k

点赞数 15

分类专栏： Vue 文章标签： java 前端 javascript 前端框架

本文链接：https://blog.csdn.net/weixin_47957908/article/details/134358469

版权

文章详细介绍了Vue2和Vue3中组件间的自定义事件处理，包括如何在父组件绑定子组件事件、子组件触发事件以及解绑事件的方法，同时特别提到了Vue3中setup函数的使用和组件上下文(context)的应用。

摘要由CSDN通过智能技术生成

Vue2&3组件自定义事件和解绑事件

Vue2组件自定义事件

功能：父组件绑定数据，子组件触发事件。（父绑子触发）

在这里插入图片描述

实现步骤（前三步在父组件实现，第四步在子组件实现）：
- 第一步：提供事件（组件）源
- 第二步：给组件绑定事件（v-on:）
- 第三步：编写回调函数，并和事件进行绑定
- 第四步：等待事件的触发，只要事件触发，则执行回调函数。

使用方法：

vm.$emit(event, arg) //触发当前实例上的时间

第一种方式：在组件标签上绑定事件

// 父组件
<template>
    <div>
        // 第一步：提供事件（组件）源
        // 第二步：给组件绑定事件（v-on:简写 => @）
        <User @event="eventBinding"></User>
    </div>
</template>
<script>
    import User from './components/User.vue'
    export default {
   
        name : 'App',
        methods: {
   
            // 第三步：编写回调函数，并和事件进行绑定
            eventBinding(name, age){
   
                console.log(name, age)
            }
        },
        components : {
   User}
    }
</script>

// 子组件
<template>
    <div>
        <button @click="triggerEvent">触发事件</button>
    </div>
</template>
<script>
    export default {
   
        name : 'User',
        data() {
   
            return {
   
                name : '张三',
                age : 20
            }
        },
        methods: {
   
            // 第四步：等待事件的触发，只要事件触发，则执行回调函数。
            triggerEvent(){
   
                this.$emit('event', this.name, this.age)
            }
        }
    }
<