亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue如何自定義事件傳參

 更新時間:2022年05月26日 16:52:34   作者:樊小書生  
這篇文章主要介紹了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)文章

  • vue子組件如何使用父組件傳過來的值

    vue子組件如何使用父組件傳過來的值

    這篇文章主要介紹了vue子組件如何使用父組件傳過來的值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue3計算屬性computed和監(jiān)聽屬性watch區(qū)別解析

    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-02
  • Vue2.2.0+新特性整理及注意事項

    Vue2.2.0+新特性整理及注意事項

    本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • vue 中引用gojs繪制E-R圖的方法示例

    vue 中引用gojs繪制E-R圖的方法示例

    這篇文章主要介紹了vue 中引用gojs繪制E-R圖的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Vue監(jiān)聽頁面刷新和關(guān)閉功能

    Vue監(jiān)聽頁面刷新和關(guān)閉功能

    我在做項目的時候,有一個需求,在離開(跳轉(zhuǎn)或者關(guān)閉)購物車頁面或者刷新購物車頁面的時候向服務(wù)器提交一次購物車商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽頁面刷新和關(guān)閉功能,需要的朋友可以參考下
    2019-06-06
  • vscode 開發(fā)Vue項目的方法步驟

    vscode 開發(fā)Vue項目的方法步驟

    這篇文章主要介紹了vscode 開發(fā)Vue項目的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vite配置路徑別名的簡單實現(xiàn)方法

    Vite配置路徑別名的簡單實現(xiàn)方法

    Vite項目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實現(xiàn)方法,需要的朋友可以參考下
    2023-04-04
  • vue自定義指令的創(chuàng)建和使用方法實例分析

    vue自定義指令的創(chuàng)建和使用方法實例分析

    這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結(jié)合完整實例形式分析了vue.js創(chuàng)建及使用自定義指令的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2018-12-12
  • vue3.0關(guān)閉eslint校驗的3種方法詳解

    vue3.0關(guān)閉eslint校驗的3種方法詳解

    這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗的3種方法,在實際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音播放功能

    vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音播放功能

    這篇文章主要介紹了在vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下
    2020-06-06

最新評論