vue如何自定義事件傳參

更新時(shí)間：2022年05月26日 16:52:34 作者：樊小書生

這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

自定義事件傳參

先來(lái)簡(jiǎn)單看個(gè)例子

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 后跟的兩個(gè)參數(shù)。
changeStatus1 打印的是 undefined。
changeStatus2 打印的是 v-for 循環(huán)中的當(dāng)前 item 對(duì)象。
changeStatus3 中 arr 參數(shù)對(duì)應(yīng) $emit 后跟的兩個(gè)參數(shù)，item 參數(shù)對(duì)應(yīng) v-for 循環(huán)中的當(dāng)前 item 對(duì)象，注意 template 中的寫法 @click="changeStatus3(arguments, item)"，按照 changeStatus3 的方式可以實(shí)現(xiàn)多種方式的混合傳參。

自定義事件的$event傳參問(wèn)題

1.$event 是 vue 提供的特殊變量，用來(lái)表示原生的事件參數(shù)對(duì)象 event

在原生事件中，$event是事件對(duì)象可以點(diǎn)出來(lái)屬性

2.在原生事件中，$event是事件對(duì)象，在自定義事件中，$event是傳遞過(guò)來(lái)的數(shù)據(jù)（參數(shù)）

在自定義事件中，$event是傳遞過(guò)來(lái)的數(shù)據(jù)

原生vue里的$event

<tempalte>
? ?<button @click = “getEvent($event)”>點(diǎn)擊</button>
</template>

<script>
? ?export default {
? ? ? methods:{
? ? ? ? ?getEvent(e) {
? ? ? ? ? ? console.log(e)
? ? ? ? ? ? // e.target 是你當(dāng)前點(diǎn)擊的元素
? ? ? ? ? ? // e.currentTarget 是你綁定事件的元素
? ? ? ? ? ?#獲得點(diǎn)擊元素的前一個(gè)元素
? ? ? ? ? ?e.currentTarget.previousElementSibling.innerHTML
? ? ? ? ? ?#獲得點(diǎn)擊元素的第一個(gè)子元素
? ? ? ? ? ?e.currentTarget.firstElementChild
? ? ? ? ? ?# 獲得點(diǎn)擊元素的下一個(gè)元素
? ? ? ? ? ?e.currentTarget.nextElementSibling
? ? ? ? ? ?# 獲得點(diǎn)擊元素中id為string的元素
? ? ? ? ? ?e.currentTarget.getElementById("string")
? ? ? ? ? ?# 獲得點(diǎn)擊元素的string屬性
? ? ? ? ? ?e.currentTarget.getAttributeNode('string')
? ? ? ? ? ?# 獲得點(diǎn)擊元素的父級(jí)元素
? ? ? ? ? ?e.currentTarget.parentElement
? ? ? ? ? ?# 獲得點(diǎn)擊元素的前一個(gè)元素的第一個(gè)子元素的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就是接收過(guò)來(lái)的$event 現(xiàn)在他就是子組件傳過(guò)來(lái)的值 不再是 對(duì)象事件?
? ? ? ? customEvent(index, e) {
? ? ? ? ? ? console.log(e) // ?some value
? ? ? ? }
? ? }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: