vue如何自定义事件传参

目录

• 自定义事件传参
• 先来简单看个例子
• 自定义事件的$event传参问题
• 原生vue里的$event
• 自定义事件里的$event

自定义事件传参

先来简单看个例子

TodoList.vue :

TodoItem.vue :

• changeStatus0 打印的是TodoItem.vue中 $emit 后跟的两个参数。
• changeStatus1 打印的是 undefined。
• changeStatus2 打印的是 v-for 循环中的当前 item 对象。
• changeStatus3 中 arr 参数对应 $emit 后跟的两个参数，item 参数对应 v-for 循环中的当前 item 对象，注意 template 中的写法 @click="changeStatus3(arguments, item)"，按照 changeStatus3 的方式可以实现多种方式的混合传参。

自定义事件的$event传参问题

1.$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event

在原生事件中，$event是事件对象 可以点出来属性 

2.在原生事件中，$event是事件对象，在自定义事件中，$event是传递过来的数据（参数）

在自定义事件中，$event是传递过来的数据

原生vue里的$event

   点击

自定义事件里的$event

子组件传值 

export default {

    methods: {
        customEvent() {
            this.$emit( custom-event ,   value )
        }
    }
}

父组件 

接收自定义事件

接收$event

export default {
    methods: {
                           e就是接收过来的$event 现在他就是子组件传过来的值 不再是 对象事件 
        customEvent(index, e) {
            console.log(e) //  some value
        }
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。