对vue中v-on绑定自定事件的实例讲解

人气：527 时间：2019-04-12

这篇文章主要为大家详细介绍了对vue中v-on绑定自定事件的实例讲解，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

关于官网vue中v-on绑定自定义事件的个人理解

对官网实例进行了一些修改，如下图：

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>v-on绑定自定义事件</title>
 <script src="vue.js"></script>
</head>
<body>
<div id="app">
 <p>{{ total }}</p>
 <button-counter v-on:increment="father1"></button-counter>
 <button-counter v-on:incr="father2"></button-counter>
 <button-counter v-on:inc="father1"></button-counter>
</div>
<script>
 Vue.component('button-counter', {
  template: '<button v-on:click="child">{{ counter }}</button>',
  data: function () {
   return {
    counter: 0
   }
  },
  methods: {
   child:function(){
    this.counter += 1;
    this.$emit('increment');
    this.$emit('incr');
    this.$emit('inc');
   }
  }
 });
 new Vue({
  el: '#app',
  data: {
   total: 0
  },
  methods: {
   father1: function () {
    this.total += 1
   },
   father2: function () {
    this.total -= 1
   }
  }
 })
</script>
</body>
</html>

【图片暂缺】

点击第一个按钮浏览器的执行顺序如图所示：

步骤一：

点击第一个按钮，执行子组件的函数child

步骤二：

分别触发该按钮中的事件$emit(‘ ')；

步骤三：

监听到 v-on:increment 事件，

步骤四：

执行父组件监听子组件的事件father1；

以上这篇对vue中v-on绑定自定事件的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/6374-0.html

注：关于对vue中v-on绑定自定事件的实例讲解的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：在vue.js中使用JSZip实现在前端解压文件的方法

下一篇：vue-cli3.0配置及使用注意事项分析