这篇“vue怎么自定义事件传参”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么自定义事件传参”文章吧。
自定义事件传参
先来简单看个例子
TodoList.vue :
<template> <ul> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item" @click="changeStatus0" ></todo-item> </li> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item" @click="changeStatus1()" ></todo-item> </li> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item" @click="changeStatus2(item)" ></todo-item> </li> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item" @click="changeStatus3(arguments, item)" ></todo-item> </li> </ul></template><script>import TodoItem from './TodoItem'export default { name: 'TodoList', components: { TodoItem }, data () { return { list: [ { id: 0, name: 'zero', desc: 'zerozerozero' }, { id: 1, name: 'one', desc: 'oneoneone' }, { id: 2, name: 'two', desc: 'twotwotwo' } ], doneList: [1] } }, methods: { changeStatus0 (val, obj) { console.log(val) console.log(obj) }, changeStatus1 (val) { console.log(val) }, changeStatus2 (obj) { console.log(obj) }, changeStatus3 (arr, obj) { console.log(arr) const val = arr[0] if (val) { const index = this.doneList.indexOf(obj.id) this.doneList.splice(index, 1) } else { this.doneList.push(obj.id) } } }}</script>TodoItem.vue :
<template> <label @click="changeStatus"> <span>{{ info.name }}: {{ status }}</span> </label></template><script>export default { name: 'TodoItem', props: { status: { type: Boolean, default: false }, info: { type: Object, default () { return {} } } }, methods: { changeStatus () { this.$emit('click', this.status, this.info) } }}</script>changeStatus0 打印的是TodoItem.vue中 $emit 后跟的两个参数。
changeStatus1 打印的是 undefined。
changeStatus2 打印的是 v-for 循环中的当前 item 对象。
changeStatus3 中 arr 参数对应 $emit 后跟的两个参数，item 参数对应 v-for 循环中的当前 item 对象，注意 template 中的写法 @click="changeStatus3(arguments, item)"，按照 changeStatus3 的方式可以实现多种方式的混合传参。
自定义事件的$event传参问题
$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event
在原生事件中，$event是事件对象 可以点出来属性
在原生事件中，$event是事件对象，在自定义事件中，$event是传递过来的数据（参数）
在自定义事件中，$event是传递过来的数据
原生vue里的$event
<tempalte> <button @click = “getEvent($event)”>点击</button></template><script> export default { methods:{ getEvent(e) { console.log(e) // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.firstElementChild # 获得点击元素的下一个元素 e.currentTarget.nextElementSibling # 获得点击元素中id为string的元素 e.currentTarget.getElementById("string") # 获得点击元素的string属性 e.currentTarget.getAttributeNode('string') # 获得点击元素的父级元素 e.currentTarget.parentElement # 获得点击元素的前一个元素的第一个子元素的HTML值 e.currentTarget.previousElementSibling.firstElementChild.innerHTML }, } }</script>自定义事件里的$event
子组件传值
export default { methods: { customEvent() { this.$emit( custom-event , value ) } }}父组件
接收自定义事件
<template> <div> <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)"> </my-list> </div></template>接收$event
export default { methods: { e就是接收过来的$event 现在他就是子组件传过来的值 不再是 对象事件 customEvent(index, e) { console.log(e) // some value } }}以上就是关于“vue怎么自定义事件传参”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
