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傳參問題
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
}
}
}
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。