Vue事件修飾符native和self

jhhfft 發布于2019-08-23 18:35 / 3310人閱讀

摘要：事出有因之前面試被問到的和相關問題，我覺得自己應該能回答出來，可能被之前一小時的問題整懵逼了。

事出有因

之前面試被問到的native和self相關問題，self我覺得自己應該能回答出來，可能被之前一小時的問題整懵逼了。尷尬~~
自己研究了一下，不足之處望補充，相互進步

native 修飾符native，有什么用

native是原生事件(第一反應，當時沒然后了...)

惡補一下

native 一定是用于自定義組件，也就是自定義的html標簽

結合代碼說得明白

注意點

當，子組件中的this.$listeners返回的是{click: ?}，box1的dom上沒有綁定click事件（可以打開F12查看），所以這個事件不是原生的click

當，子組件中的this.$listeners返回的是{}，box1的dom上綁定了click事件（可以打開F12查看），所以這個事件是原生的click

當，子組件中的this.$listeners返回的是{click: ?}，box1的dom上沒有綁定click事件（可以打開F12查看），所以這個事件不是原生的click

子組件的this.$emit("eventTpye")是從this.$listeners返回值中查找的

為什么有時候組件點擊事件不會生效
猜測

子組件html標簽沒有定義click原生事件

子組件沒有執行this.$emit("click")

所以

直接.native將事件綁定到子組件html標簽上，類似dom.addEventListener("click", handler)

self 作用

引用官方說明

...

結合代碼說明

就是利用e.target和e.currentTarget，當添加self時，只有當兩者相等時才會觸發回調

GPU云服務器云服務器修飾符 python修飾符 javaclass修飾符 aspx修飾符

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105483.html

Vue.js Guide Essentials-說人話-速記版

摘要：以下內容根據部分速記。同時，需要在父組件標簽中添加這個屬性，該屬性才能傳遞到子組件內。把父組件傳遞的數據當做子組件的初始值。以下內容根據Vue.js Guide Essentials部分速記。不含動畫/mixin/SSR/路由/狀態管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開始聲明式...

Sanchi 2019-08-21 18:38 評論0 收藏0
vue源碼解析－事件機制

摘要：直接寫了組件機制。今天看了下的關于事件的機制。源碼都是基于最新的。綁定了事件回調函數的。初始化的時候，將中的方法代理到的同時修飾了事件的回調函數。對于事件有兩個底層的處理邏輯。上一章沒什么經驗。直接寫了組件機制。感覺涉及到的東西非常的多，不是很方便講。今天看了下vue的關于事件的機制。有一些些體會。寫出來。大家一起糾正，分享。源碼都是基于最新的Vue.js v2.3.0。下面我們來看...

LuDongWei 2019-08-21 11:44 評論0 收藏0
Vue指令詳解

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。只當點擊鼠標右鍵時觸發只當點擊鼠標中鍵時觸發以模式添加偵聽器，減少額外的監聽，提高性能表示永遠不會調用。記住，指令函數能夠接受所有合法的表達式。思維導圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關于key 官方...

itvincent 2019-08-23 15:38 評論0 收藏0
Vue指令詳解

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。只當點擊鼠標右鍵時觸發只當點擊鼠標中鍵時觸發以模式添加偵聽器，減少額外的監聽，提高性能表示永遠不會調用。記住，指令函數能夠接受所有合法的表達式。思維導圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關于key 官方...

malakashi 2019-08-30 15:56 評論0 收藏0