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

来源：懂视网责编：小采时间：2020-11-27 22:08:11

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

对vue中v-on绑定自定事件的实例讲解:关于官网vue中v-on绑定自定义事件的个人理解对官网实例进行了一些修改，如下图： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>v-on绑定自定义事件</tit

推荐度：

点击下载本文 文档为doc格式

导读对vue中v-on绑定自定事件的实例讲解:关于官网vue中v-on绑定自定义事件的个人理解对官网实例进行了一些修改，如下图： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>v-on绑定自定义事件</tit

关于官网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>