vue怎么自定义事件传参

这篇“vue怎么自定义事件传参”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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传参问题

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event

在原生事件中，$event是事件对象 可以点出来属性 

在原生事件中，$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        }    }}

以上就是关于“vue怎么自定义事件传参”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。