在 index.html 中引用了 input.vue 中的 <g-input>，如下

1、index.html

<div id="app"><g-input value="王" @change="inputChange"></g-input> </div>

2、APP.js

import Vue from 'vue' import Input from './input'Vue.component('g-input',Input);new Vue({el: '#app',methods:{inputChange(xxx){console.log(xxx.target.value);}} });

3、input.vue

<template><div><input :value="value" type="text" @change="$emit('change',$event)"></div> </template>

---

一、在input.vue中

vm.$emit( eventName, […args] )參數(shù)：{string} eventName [...args]
觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。

<input> 標簽本身擁有一個 change 事件，當用戶觸發(fā) change 事件時，會有一個事件對象；在 input.vue 中，可以使用$emit的第二個參數(shù)$event來提供被拋出的這個事件對象（$event會作為第一個參數(shù)傳入 inputChange 函數(shù)）。

$event被透傳給了監(jiān)聽 input.vue 子組件的 inputChange 函數(shù)

注：原生 <input> 觸發(fā)了一個 change 事件，我們通過$emit監(jiān)聽原生 <input> 的 change 事件觸發(fā)了我們自己的 change 事件，并通過$event拿到了 change 事件的事件對象

二、在index.html中

index.html 中的 <g-input> 監(jiān)聽的其實是我們自己的 change 事件，監(jiān)聽之后會觸發(fā) app.js 中的 inputChange 函數(shù)。這個函數(shù)的參數(shù) xxx 就是通過$emit拿到的事件對象，這個事件對象是瀏覽器通過原生 change 事件傳給$emit的。

input.html 是通過$event訪問到了 input.vue 中 change 事件的事件對象

總結

以上是生活随笔為你收集整理的ant design vue input change_vue中关于$emit用法的笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。