Home > Article > Web Front-end > Explain in detail how to use this.$emit in vue.js

Explain in detail how to use this.$emit in vue.js

亚连Original: 2018-06-05 11:20:0510542browse

Below I will share with you an in-depth understanding of this.$emit in vue.js. It has a good reference value and I hope it will be helpful to everyone.

Understanding of this.emit in vue.js: this.emit('increment1', "This position can add parameters"); in fact, its function is to trigger a custom function.

Look at the example:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<script src="vue.js"></script>
<body>
<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment1="incrementTotal1"></button-counter>
 <button-counter v-on:increment2="incrementTotal2"></button-counter>
</p>
</body>
<script>
 Vue.component(&#39;button-counter&#39;, {
 template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
 data: function () {
  return {
  counter: 0
  }
 },
 methods: {
  increment: function () {
  this.counter += 1;
  this.$emit(&#39;increment1&#39;,"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
//  this.$emit(&#39;increment2&#39;); //此时不会触发自定义increment2的函数。
  }
 }
 });
 new Vue({
 el: &#39;#counter-event-example&#39;,
 data: {
  total: 0
 },
 methods: {
  incrementTotal1: function (e) {
  this.total += 1;
  console.log(e);
  },
  incrementTotal2: function () {
  this.total += 1;
  }
 }
 })
</script>
</html>

Further analyze the above example:

1. First look at the custom component button-counter and bind the method: increment;

2. When the button is clicked, the function increment will be executed, and there is this.$emit(' increment1',"This position can add parameters");

3. When increment is executed, the custom function increment1, which is the incrementTotal1 function, will be triggered;

4. And increment The custom function increment2 is not triggered during execution, so clicking the second button does not execute the incrementTotal2 function.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use sass in vue cli webpack (detailed tutorial)

How to change the P tag text in jQuery Value

Implement the method of adding and assigning tag sub-elements in jQuery

The above is the detailed content of Explain in detail how to use this.$emit in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement password display and hide switching function in vueNext article：How to implement password display and hide switching function in vue

See more

Explain in detail how to use this.$emit in vue.js

Related articles