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

目录
  • 一、每个 Vue 实例都实现了事件接口
  • 二、注意事项
  • 三、例子及说明
  • 四、总说明

一、每个 Vue 实例都实现了事件接口

即:

1、使用 $on(eventName) 监听事件

2、使用 $emit(eventName, optionalPayload) 触发事件

二、注意事项

1、父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

2、不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定

三、例子及说明

1、父组件代码及说明

<template>
  <div>
    <p>{{ total }}</p>
    <my-button4 @increment1="incrementTotal1"></my-button4>     <!--自定义方法increment1监听子组件触发情况-->
    <my-button4 @increment2="incrementTotal2"></my-button4>     <!--自定义方法increment2监听子组件触发情况-->
  </div>
</template>

<script>
  import myButton4 from './components/myButton4.vue'
  export default{
    data(){
      return{
          total:0
      }
    },
    methods:{
      incrementTotal1: function () {                     /*事件incrementTotal触发*/
        this.total += 1
      },
      incrementTotal2: function () {                    /*事件incrementTota2触发*/
        this.total += 2
      }
    },
    components:{                        /*子组件的实例,要尽量放在最后,不然会出现一些不必要的问题*/
      myButton4
    }
  }
</script>

2、子组件代码及说明

<template>
      <button @click="incrementCounter">{{counter}}</button> <!--在子组件中创建一个按钮,创建点击事件-->
</template>

<script>
   export default{
     data(){
       return{
         counter: 0
       }
     },
     methods: {
       incrementCounter: function (){
         this.counter += 1
         this.$emit('increment1')        /*触发自定义事件increment1,也就是父组件中的incrementTotal1事件*/
         this.$emit('increment2')        /*触发自定义事件increment2,也就是父组件中的incrementTotal2事件*/
                                         /*这两个事件一次只会触发一个,为什么呢?很简单,因为每次只单击一个按钮*/
       }
     }
   }
</script>

3、运行截图

A、开始截图:

B、点击第一个按钮截图(+1)

C、点击第二个按钮截图(+2)

四、总说明

1、首先看子组件件,按钮中给其绑定了方法:incrementCounter;

2、点击button时会执行函数 incrementCounter,increment中有 this.$emit(‘increment1)和this.$emit(‘increment2),看点击的是哪个按钮就执行哪个;

3、当incrementCounter执行时,就会触发自定函数increment1(点击第一个按钮的时候)或者increment(点击第二个按钮的时候),也就是incrementTotal1或者incrementTotal2函数;

到此这篇关于关于vue.js中this.$emit的理解使用的文章就介绍到这了,更多相关vue.js this.$emit内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 对vue.js中this.$emit的深入理解

    对于vue.js中的this.emit的理解:this.emit('increment1',"这个位子是可以加参数的"):其实它的作用就是触发自定义函数. 看例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="vue.js"

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

    目录 一.每个 Vue 实例都实现了事件接口 二.注意事项 三.例子及说明 四.总说明 一.每个 Vue 实例都实现了事件接口 即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName, optionalPayload) 触发事件 二.注意事项 1.父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 2.不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定 三.例子及说明 1.父组件代码及说明 <template>

  • 深入理解vue.js中的v-if和v-show

    本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: (2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件:v-show只是简单的基于css切换: (3)编译条件:v-if是惰性的,如果初始条件为假,

  • 深入理解vue.js中$watch的oldvalue与newValue

    $watch中的oldvalue和newValue 大家都知道,在vue.js中给我们提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue. 顾名思义,这两个对象就是对象发生变化前后的值. 但是在使用过程中我发现这两个值并不总是预期的.下面来一起看看详细的介绍: 定义data的值 data: { arr: [{ name: '笨笨', address: '上海' }, { name: '笨笨熊', address: '北京'

  • vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • 关于vue.js过渡css类名的理解(推荐)

    首先附上官方文档图. 总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想在一起,在经过多方的查找,总算是理解了,以下就是我所理解的意思,希望对路过的有所帮助,更希望路过的能帮我检查检查. start: 首先,通过一个例子来说明,实践是检验真理的唯一标准. 结果:点击按钮,show=false时,div消失:再次点击,show=true,div用蓝色逐渐

  • 初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • 深入浅析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

随机推荐