淺談vue中$event理解和框架中在包含預設值外傳參
在vue中普通方法中預設帶有event DOM事件如greet方法，如果是行內函數的話如warn方法，只需要在定義方法的地方同時傳入$event即可，這裡需要強調的是在iview中，這裡用的是select元件，在其on-change事件中如果想要傳入自定義的引數，使用直接傳參的方式，獲取的是傳入的引數，那麼如何獲取到該方法預設的返回值（即不傳引數時返回的預設選中值），這裡使用 $event傳入代表選中的值，如test方法，這裡似乎也只要$event可以傳入代表選中的值，其他的可能就是普通的引數，至於這個時候想要獲取dom事件似乎已經沒有了意義，因為這裡的select是iview封裝的元件。
當然具體原因呢也在這裡自定義的元件,在vue中自定義元件向父元件傳參的時候是通過$emit觸發事件，父元件通過v-on，監聽事件，如果子元件向父元件傳引數，那麼在監聽的事件裡通過$event來接受引數。如下圖
如果這裡寫成了方法的方式，該方法預設接受一個引數（也就是子元件傳給父元件的值），也是我們呼叫框架的結構時，裡面所說的預設返回值。
v-on:formChild='change'
方法裡使用
change(child){conslo.log(child)}
如果你想在子元件傳給父元件的值之外新增自定義的值，那麼你在方法裡就必須把子元件傳過來的預設值通過$event注入到方法裡。
v-on:formChild='change($event,"來自子元件")'
方法裡使用
change(child,msg){conslo.log(child,msg)}
補充知識：Vue.$event 內聯語句中傳入原始dom資料
@click=“fun1” //預設傳入原始資料 @click=“fun1(‘其它引數')” //僅傳入指定資料 //要傳入指定資料 + 原始資料 @click=“fun1($event,‘其它引數')”
有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變數 $event 把它傳入方法
參考:內聯處理器中的方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Vue.$event 內聯語句中傳入原始dom資料</title>
</head>
<body>
<div id="swq">
<swq></swq>
</div>
<script type="text/x-template" id="swq-template">
<div>
<div @click="fun1">fun1</div>
<div @click="fun1('其它引數')">fun1('其它引數')</div>
<div @click="fun1($event,'其它引數')">fun1($event,'其它引數')</div>
</div>
</script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript">
var swq = {
template: "#swq-template",methods: {
fun1(event) {
console.log(event)
console.log(arguments)
},},};
var vu = new Vue({
el: "#swq",components: {
swq: swq,})
</script>
</body>
</html>
以上這篇淺談vue中$event理解和框架中在包含預設值外傳參就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。