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 后跟的兩個參數(shù)。
- changeStatus1 打印的是 undefined。
- changeStatus2 打印的是 v-for 循環(huán)中的當(dāng)前 item 對象。
- changeStatus3 中 arr 參數(shù)對應(yīng) $emit 后跟的兩個參數(shù),item 參數(shù)對應(yīng) v-for 循環(huán)中的當(dāng)前 item 對象,注意 template 中的寫法 @click="changeStatus3(arguments, item)",按照 changeStatus3 的方式可以實現(xiàn)多種方式的混合傳參。
自定義事件的$event傳參問題
1.$event 是 vue 提供的特殊變量,用來表示原生的事件參數(shù)對象 event
在原生事件中,$event是事件對象 可以點出來屬性
2.在原生事件中,$event是事件對象,在自定義事件中,$event是傳遞過來的數(shù)據(jù)(參數(shù))
在自定義事件中,$event是傳遞過來的數(shù)據(jù)
原生vue里的$event
<tempalte> ? ?<button @click = “getEvent($event)”>點擊</button> </template>
<script> ? ?export default { ? ? ? methods:{ ? ? ? ? ?getEvent(e) { ? ? ? ? ? ? console.log(e) ? ? ? ? ? ? // e.target 是你當(dāng)前點擊的元素 ? ? ? ? ? ? // 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 現(xiàn)在他就是子組件傳過來的值 不再是 對象事件? ? ? ? ? customEvent(index, e) { ? ? ? ? ? ? console.log(e) // ?some value ? ? ? ? } ? ? } }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3計算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計算屬性適用于對已有的數(shù)據(jù)進行計算,派生新的數(shù)據(jù),并在模板中使用;而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場景,選擇適合的機制這篇文章主要介紹了Vue3計算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06