vue如何自定義事件傳參

2022-05-26 22:01:35

自定義事件傳參

先來簡單看個例子

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
        }
    }
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。