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 后跟的两个参数。
• 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
    }
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。