Custom event parameters
Let's take a brief look at an example
:
<template> <ul> <li> <todo-item v-for="item in list" :key="" :status="()" :info="item" @click="changeStatus0" ></todo-item> </li> <li> <todo-item v-for="item in list" :key="" :status="()" :info="item" @click="changeStatus1()" ></todo-item> </li> <li> <todo-item v-for="item in list" :key="" :status="()" :info="item" @click="changeStatus2(item)" ></todo-item> </li> <li> <todo-item v-for="item in list" :key="" :status="()" :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) {
(val)
(obj)
},
changeStatus1 (val) {
(val)
},
changeStatus2 (obj) {
(obj)
},
changeStatus3 (arr, obj) {
(arr)
const val = arr[0]
if (val) {
const index = ()
(index, 1)
} else {
()
}
}
}
}
</script>:
<template>
<label @click="changeStatus">
<span>{{ }}: {{ 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', , )
}
}
}
</script>- changeStatus0 prints two parameters followed by $emit.
- changeStatus1 prints undefined.
- changeStatus2 prints the current item object in the v-for loop.
- The arr parameter in changeStatus3 corresponds to two parameters followed by $emit, and the item parameter corresponds to the current item object in the v-for loop. Note the writing method in template @click="changeStatus3(arguments, item)". According to changeStatus3, a variety of mixed parameters can be achieved.
$event argument issue for custom event
1.$event is a special variable provided by vue to represent the native event parameter object event
In native events, $event is an event object. You can click on the attributes.
2. In native events, $event is the event object, and in custom events, $event is the passed data (parameters)
In a custom event, $event is the data passed in
$event in native vue
<tempalte> <button @click = “getEvent($event)”>Click</button> </template>
<script>
export default {
methods:{
getEvent(e) {
(e)
// is the element you are currently clicking // It is the element of the event you bind #Get the previous element of the click element
#Get the first child element of the click element
# Get the next element of the click element
# Get the element with id string in the click element ("string")
# Get the string attribute of the click element ('string')
# Get the parent element of the click element
# Get the HTML value of the first child element of the previous element of the click element
},
}
}
</script>$event in custom events
Subcomponent pass value
export default {
methods: {
customEvent() {
this.$emit( custom-event , value )
}
}
}Parent component
Receive custom events
<template> <div> <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)"> </my-list> </div> </template>
Receive $event
export default {
methods: {
eIt's received$event Now it is the value transmitted from the child component No more Object Events
customEvent(index, e) {
(e) // some value
}
}
}The above is personal experience. I hope you can give you a reference and I hope you can support me more.