怎么在Vue.js中通過自定義事件實(shí)現(xiàn)組件通信-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)10多年來致力于為客戶提供網(wǎng)站制作、成都網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了數(shù)千家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

組件通信

從父組件向子組件通信，通過props傳遞數(shù)據(jù)就可以了，但Vue組件通信的場景不止有這一種，歸納起來，組件之間的通信可以用下圖來表示：

怎么在Vue.js中通過自定義事件實(shí)現(xiàn)組件通信

自定義事件

當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí)，就要用到自定義事件。子組件用**$ emit()來觸發(fā)事件**，父組件用**$ on()**來監(jiān)聽子組件的事件。

父組件也可以直接在子組件的自定義標(biāo)簽上使用v-on來監(jiān)聽子組件觸發(fā)的事件。




  
  
  
  
  自定義事件


  
    總數(shù):{{total}}

怎么在Vue.js中通過自定義事件實(shí)現(xiàn)組件通信

子組件有兩個(gè)按鈕，分別實(shí)現(xiàn)+1和-1的效果，在改變組件的data “counter”后，通過$emit()在把它傳遞給父組件，父組件使用v-on:increase和v-on:reduce監(jiān)聽事件。

$emit()方法的第一個(gè)參數(shù)是自定義事件的名稱，后面的參數(shù)是要傳遞的數(shù)據(jù)，可以不填或者填寫多個(gè)。

注意：除了用v-on在組件上監(jiān)聽自定義事件外，也可以監(jiān)聽DOM事件，這時(shí)候可以用 .native修飾符表示監(jiān)聽的是一個(gè)原生事件，監(jiān)聽的是該組件的根元素：

使用v-model

Vue 2.x 可以在自定義組件上使用v-model指令。




  
  
  
  
  使用v-model


  
    總數(shù)：{{total}}

仍然是點(diǎn)擊按鈕+1的效果，不過這次組件$emit()的事件是特殊的input，在使用組件的父級，并沒有在上使用@input=“handler”，而是使用了v-model板頂?shù)囊粋€(gè)數(shù)據(jù)total。這也可以稱作是一個(gè)語法糖，因?yàn)樯厦娴氖纠梢蚤g接地用自定義事件來實(shí)現(xiàn)：


  總數(shù)：{{total}}

v-model還可以用來創(chuàng)建自定義的表單輸入組件，進(jìn)行數(shù)據(jù)雙向綁定：

注意：實(shí)現(xiàn)這樣一個(gè)具有雙向綁定的v-model組件要滿足下面的兩個(gè)要求：

以上就是怎么在Vue.js中通過自定義事件實(shí)現(xiàn)組件通信，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么在Vue.js中通過自定義事件實(shí)現(xiàn)組件通信-創(chuàng)新互聯(lián)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管