自定义事件传参
先来简单看个例子
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传参问题
1.$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event
在原生事件中，$event是事件对象 可以点出来属性
2.在原生事件中，$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
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
