vue怎么自定義事件傳參

這篇“vue怎么自定義事件傳參”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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)中的當前 item 對象。

• changeStatus3 中 arr 參數(shù)對應 $emit 后跟的兩個參數(shù)，item 參數(shù)對應 v-for 循環(huán)中的當前 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 是你當前點擊的元素
            // 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
        }
    }
}

以上就是關于“vue怎么自定義事件傳參”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。