欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關于vue.js中this.$emit的理解使用

 更新時間:2022年08月22日 11:41:42   作者:沒離開過  
本文主要介紹了關于vue.js中this.$emit的理解使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、每個 Vue 實例都實現(xiàn)了事件接口

即:

1、使用 $on(eventName) 監(jiān)聽事件

2、使用 $emit(eventName, optionalPayload) 觸發(fā)事件

二、注意事項

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

 2、不能用 $on 監(jiān)聽子組件釋放的事件,而必須在模板里直接用 v-on 綁定

三、例子及說明

1、父組件代碼及說明

<template>
? <div>
? ? <p>{{ total }}</p>
? ? <my-button4 @increment1="incrementTotal1"></my-button4> ? ? <!--自定義方法increment1監(jiān)聽子組件觸發(fā)情況-->
? ? <my-button4 @increment2="incrementTotal2"></my-button4> ? ? <!--自定義方法increment2監(jiān)聽子組件觸發(fā)情況-->
? </div>
</template>

<script>
? import myButton4 from './components/myButton4.vue'
? export default{
? ? data(){
? ? ? return{
? ? ? ? ? total:0
? ? ? }
? ? },
? ? methods:{
? ? ? incrementTotal1: function () { ? ? ? ? ? ? ? ? ? ? /*事件incrementTotal觸發(fā)*/
? ? ? ? this.total += 1
? ? ? },
? ? ? incrementTotal2: function () { ? ? ? ? ? ? ? ? ? ?/*事件incrementTota2觸發(fā)*/
? ? ? ? this.total += 2
? ? ? }
? ? },
? ? components:{ ? ? ? ? ? ? ? ? ? ? ? ?/*子組件的實例,要盡量放在最后,不然會出現(xiàn)一些不必要的問題*/
? ? ? myButton4
? ? }
? }
</script>

2、子組件代碼及說明

<template>
? ? ? <button @click="incrementCounter">{{counter}}</button> <!--在子組件中創(chuàng)建一個按鈕,創(chuàng)建點擊事件-->
</template>

<script>
? ?export default{
? ? ?data(){
? ? ? ?return{
? ? ? ? ?counter: 0
? ? ? ?}
? ? ?},
? ? ?methods: {
? ? ? ?incrementCounter: function (){
? ? ? ? ?this.counter += 1
? ? ? ? ?this.$emit('increment1') ? ? ? ?/*觸發(fā)自定義事件increment1,也就是父組件中的incrementTotal1事件*/
? ? ? ? ?this.$emit('increment2') ? ? ? ?/*觸發(fā)自定義事件increment2,也就是父組件中的incrementTotal2事件*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/*這兩個事件一次只會觸發(fā)一個,為什么呢?很簡單,因為每次只單擊一個按鈕*/
? ? ? ?}
? ? ?}
? ?}
</script>

3、運行截圖

A、開始截圖:

B、點擊第一個按鈕截圖(+1)

C、點擊第二個按鈕截圖(+2)

 四、總說明

1、首先看子組件件,按鈕中給其綁定了方法:incrementCounter; 

2、點擊button時會執(zhí)行函數(shù) incrementCounter,increment中有 this.$emit(‘increment1)和this.$emit(‘increment2),看點擊的是哪個按鈕就執(zhí)行哪個; 

3、當incrementCounter執(zhí)行時,就會觸發(fā)自定函數(shù)increment1(點擊第一個按鈕的時候)或者increment(點擊第二個按鈕的時候),也就是incrementTotal1或者incrementTotal2函數(shù); 

到此這篇關于關于vue.js中this.$emit的理解使用的文章就介紹到這了,更多相關vue.js this.$emit內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vue-cli3.x + axios 跨域方案踩坑指北

    Vue-cli3.x + axios 跨域方案踩坑指北

    這篇文章主要介紹了Vue-cli3.x + axios 跨域方案踩坑指北,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-07-07
  • 詳解VueRouter進階之導航鉤子和路由元信息

    詳解VueRouter進階之導航鉤子和路由元信息

    本篇文章主要介紹了詳解VueRouter進階之導航鉤子和路由元信息,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • Vue+Springboot實現(xiàn)接口簽名的示例代碼

    Vue+Springboot實現(xiàn)接口簽名的示例代碼

    這篇文章主要介紹了Vue+Springboot實現(xiàn)接口簽名的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-04-04
  • vue-route路由管理的安裝與配置方法

    vue-route路由管理的安裝與配置方法

    這篇文章主要介紹了vue-route路由管理的安裝與配置,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-07-07
  • vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼

    vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼

    這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • 詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略

    詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略

    本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡單攻略,這里整理了詳細的步驟,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • 利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)(附源碼)

    利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)(附源碼)

    這篇文章主要介紹了利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)的相關資料,,文中給出了詳細的介紹與示例代碼,并在文章結尾給出了完整的項目下載,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-02-02
  • Vue組件中常見的props默認值陷阱問題

    Vue組件中常見的props默認值陷阱問題

    這篇文章主要介紹了避免Vue組件中常見的props默認值陷阱,本文通過問題展示及解決方案給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • 在vue組件中使用axios的方法

    在vue組件中使用axios的方法

    下面小編就為大家分享一篇在vue組件中使用axios的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue開發(fā)移動端使用better-scroll時click事件失效的解決方案

    vue開發(fā)移動端使用better-scroll時click事件失效的解決方案

    這篇文章主要介紹了vue開發(fā)移動端使用better-scroll時click事件失效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-07-07

最新評論