SoFunction
Updated on 2025-04-03

When vue uses $emit, the parent component cannot listen to event instances of the child component

When vue uses $emit, the parent component cannot listen to event instances of the child component

Updated: February 26, 2018 14:55:44 Author: Feng Si
Below, the editor will share with you an article when vue uses $emit, the parent component cannot listen to event instances of the child component. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor

When vue uses $emit, the reason why the parent component cannot listen to events of the child component is that the event name passed in $emit can only be used in lowercase and cannot be named with uppercase camel rule

<div >
  <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/"></child>
 </div>
 <script>
  ('button-counter', {
   template: '<button v-on:click="increment">{{ counter }}</button>',
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
      += 1
     this.$emit('ee', );//efficient     this.$emit('eEvent', );//Invalid, cannot be named using capital camel rule    }
   },
  })
  new Vue({
   el: '#counter-event-example',
   data: {
    total: 'Click the button below'
   },
   methods: {
    incrementTotal: function (b) {
      = b;
    }
   }
  })
 </script>

The above example of the event that the parent component cannot listen to the child component when vue is using $emit is the entire content I share with you. I hope it can give you a reference and I hope you can support me more.

  • vue
  • $emit
  • Parent component
  • monitor
  • Subcomponents

Related Articles

  • Ten ways to communicate with parent-child components

    Recently, I have been doing optimization on the code level of Vue project. Writing articles is very easy. Today, the editor will share with you ten ways of communication between father and son components. Interested friends follow the editor to take a look.
    2018-10-10

  • Example details of proxy proxy in vue

    This article mainly introduces the proxy proxy in vue. This article introduces you very detailed through the example code, which has certain reference value for your study or work. Friends who need it can refer to it.
    2023-02-02

  • vue realizes large file fragment upload and interruption of breakpoints to Qiniu Cloud

    This article introduces the method of Vue to upload large file fragments and upload breakpoints to Qiniu Cloud. The article introduces it in detail through sample code. It has certain reference value for everyone's study or work. Friends who need it can refer to it.
    2022-06-06

  • How to use Element ui and vector graphics for vue3.0 installation

    This article mainly introduces the installation of Element ui and vector graphics for vue3.0. This article introduces you very detailedly and has certain reference value for your study or work. Friends who need it can refer to it.
    2021-12-12

  • Solve the problem that the style of vant's UI components cannot be modified after vue is scoped

    This article mainly introduces the problem of solving the style of the UI component that cannot be modified after vue scoped. It has good reference value and hopes it will be helpful to everyone. Let's take a look with the editor
    2020-09-09

  • Steps, FAQs and Solutions for Deploying Front-end Vue Projects in Nginx

    In modern web development, it has become a popular framework for front-end developers to build single-page applications. Nginx has become an ideal choice for deploying Vue projects with its high performance and stability. This article mainly introduces the steps, common problems and solutions for Nginx to deploy front-end Vue projects. Friends who need it can refer to it.
    2024-09-09

  • Example of a method for passing data between components in vue

    Vue's component scope is all orphaned, and the parent component's data is not allowed to be directly referenced within the template of the child component. A specific method must be used to achieve data transfer between components. The following article mainly introduces examples of the methods for passing data between various components in vue. Friends who need it can refer to it and learn it.
    2017-07-07

  • vue3 avatar upload component function implementation

    This article mainly introduces the function of the vue3 avatar upload component, uses the two-way binding of the custom component v-model, and uses axios + formData to upload files. This article combines the example code to introduce it to you in a very detailed way. Friends who need it can refer to it.
    2023-05-05

  • Implementation of vue cli3 adapted to all end solutions

    This article mainly introduces the implementation of vue cli3 adapted to all end solutions. The example code is introduced in this article in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
    2020-04-04

  • Detailed explanation of element-ui component el-autocomplete usage pitfall records

    Recently, the el-autocomplete component was used. This article mainly introduces the use of element-ui component el-autocomplete. The example code is introduced in this article in detail and has certain reference value. Interested friends can refer to it.
    2022-03-03

Latest Comments