vue如何自定義事件傳參
自定義事件傳參
先來簡(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傳參問題
1.$event 是 vue 提供的特殊變量,用來表示原生的事件參數(shù)對(duì)象 event
在原生事件中,$event是事件對(duì)象 可以點(diǎn)出來屬性
2.在原生事件中,$event是事件對(duì)象,在自定義事件中,$event是傳遞過來的數(shù)據(jù)(參數(shù))
在自定義事件中,$event是傳遞過來的數(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就是接收過來的$event 現(xiàn)在他就是子組件傳過來的值 不再是 對(duì)象事件? ? ? ? ? customEvent(index, e) { ? ? ? ? ? ? console.log(e) // ?some value ? ? ? ? } ? ? } }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對(duì)已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用;而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場(chǎng)景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02vscode 開發(fā)Vue項(xiàng)目的方法步驟
這篇文章主要介紹了vscode 開發(fā)Vue項(xiàng)目的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動(dòng)將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04vue自定義指令的創(chuàng)建和使用方法實(shí)例分析
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結(jié)合完整實(shí)例形式分析了vue.js創(chuàng)建及使用自定義指令的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12vue3.0關(guān)閉eslint校驗(yàn)的3種方法詳解
這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗(yàn)的3種方法,在實(shí)際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06vue項(xiàng)目或網(wǎng)頁上實(shí)現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項(xiàng)目或網(wǎng)頁上實(shí)現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06