在 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ā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

<input> 標(biāo)簽本身?yè)碛幸粋€(gè) change 事件，當(dāng)用戶觸發(fā) change 事件時(shí)，會(huì)有一個(gè)事件對(duì)象；在 input.vue 中，可以使用$emit的第二個(gè)參數(shù)$event來(lái)提供被拋出的這個(gè)事件對(duì)象（$event會(huì)作為第一個(gè)參數(shù)傳入 inputChange 函數(shù)）。

$event被透?jìng)鹘o了監(jiān)聽(tīng) input.vue 子組件的 inputChange 函數(shù)

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

二、在index.html中

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

input.html 是通過(guò)$event訪問(wèn)到了 input.vue 中 change 事件的事件對(duì)象

總結(jié)

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

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