本篇文章給大家分享的是有關(guān)Vue中怎么自定義事件，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)黑龍江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

事件綁定

每個 Vue 實(shí)例都實(shí)現(xiàn)了事件接口 (Events interface)，即

使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件

[注意]Vue 的事件系統(tǒng)分離自瀏覽器的EventTarget API。盡管它們的運(yùn)行類似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的別名

另外，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件

[注意]不能用 $on 偵聽子組件拋出的事件，而必須在模板里直接用 v-on 綁定

<div id="example">
 <parent></parent>
</div>

<script>
var childNode = {
 template: `<button @click="incrementCounter">{{ counter }}</button>`,
 data(){
  return {
   counter: 0
  }
 },
 methods:{
  incrementCounter(){
   this.counter ++;
   this.$emit('increment');
  }
 },
}
var parentNode = {
 template: `
 <div class="parent">
  <p>{{total}}</p>
  <child @increment="incrementTotal"></child>
  <child @increment="incrementTotal"></child>
 </div>
 `,
 components: {
  'child': childNode
 },
 data(){
  return {
   'total':0
  }
 },
 methods:{
  incrementTotal(){
   this.total ++;
  }
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
  'parent': parentNode
 }
})
</script>

命名約定

自定義事件的命名約定與組件注冊及props的命名約定都不相同，由于自定義事件實(shí)質(zhì)上也是屬于HTML的屬性，所以其在HTML模板中，最好使用中劃線形式

<child @pass-data="getData"></child>

而子組件中觸發(fā)事件時，同樣使用中劃線形式

 this.$emit('pass-data',this.childMsg)

數(shù)據(jù)傳遞

子組件通過$emit可以觸發(fā)事件，第一個參數(shù)為要觸發(fā)的事件，第二個事件為要傳遞的數(shù)據(jù)

this.$emit('pass-data',this.childMsg)

父組件通過$on監(jiān)聽事件，事件處理函數(shù)的參數(shù)則為接收的數(shù)據(jù)

getData(value){
   this.msg = value;
}

<div id="example">
 <parent></parent>
</div>

<script>
var childNode = {
 template: `
 <div class="child">
  <div>
   <span>子組件數(shù)據(jù)</span>
   <input v-model="childMsg" @input="data">
  </div>
  <p>{{childMsg}}</p>
 </div>
 `,
 data(){
  return{
   childMsg:''
  }
 },
 methods:{
  data(){
   this.$emit('pass-data',this.childMsg)
  }
 }
}
var parentNode = {
 template: `
 <div class="parent">
  <div>
   <span>父組件數(shù)據(jù)</span>
   <input v-model="msg">
  </div>
  <p>{{msg}}</p>
  <child @pass-data="getData"></child>
 </div>
 `,
 components: {
  'child': childNode
 },
 data(){
  return {
   'msg':'match'
  }
 },
 methods:{
  getData(value){
   this.msg = value;
  }
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
  'parent': parentNode
 }
})
</script>

sync修飾符

在一些情況下，可能會需要對一個 prop 進(jìn)行雙向綁定。事實(shí)上，這正是Vue1.x中的 .sync修飾符所提供的功能。當(dāng)一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定的值。這很方便，但也會導(dǎo)致問題，因?yàn)樗茐牧藛蜗驍?shù)據(jù)流的假設(shè)。由于子組件改變 prop 的代碼和普通的狀態(tài)改動代碼毫無區(qū)別，當(dāng)光看子組件的代碼時，完全不知道它何時悄悄地改變了父組件的狀態(tài)。這在 debug 復(fù)雜結(jié)構(gòu)的應(yīng)用時會帶來很高的維護(hù)成本，上面所說的正是在 2.0 中移除 .sync 的理由

從 2.3.0 起重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。它會被擴(kuò)展為一個自動更新父組件屬性的 v-on 偵聽器

<comp :foo.sync="bar"></comp>

會被擴(kuò)展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當(dāng)子組件需要更新 foo 的值時，它需要顯式地觸發(fā)一個更新事件：

this.$emit('update:foo', newValue)

因此，可以使用.sync來簡化自定義事件的操作，實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞

<div id="example">
 <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
 template: `
 <div class="child">
  <div>子組件數(shù)據(jù)：{{childMsg}}</div>
  <input v-model="childMsg">
  <button @click=add >+1</button>
 </div>
 `,
 data(){
  return{
   childMsg: 0
  }
 },
 methods:{
  add(){
   this.childMsg++;
   this.$emit('update:foo',this.childMsg);
  }
 }
};
var parentNode = {
 template: `
 <div class="parent">
  <p>父組件數(shù)據(jù)：{{msg}}</p>
  <child :foo.sync="msg"></child>
 </div>
 `,
 components: {
  'child': childNode
 },
 data(){
  return {
   'msg':0
  }
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
  'parent': parentNode
 }
})
</script>

以上就是Vue中怎么自定義事件，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)成都做網(wǎng)站行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：Vue中怎么自定義事件-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://chinadenli.net/article40/eogho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、軟件開發(fā)、虛擬主機(jī)、品牌網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)