主页 / 网络编程 /

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

网络编程 2021-07-04 16:46www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇对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.ponent('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绑定自定事件的实例讲解就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：jQuery实现动画、消失、显现、渐出、渐入效果示 下一篇：微信小程序开发之自定义tabBar的实现

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by