今天就跟大家聊聊有关怎么在Vue中实例事件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
具体如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 实例事件</title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <h2>Vue 实例事件</h2> <hr> <div id="app"> <p> {{num}} </p> <p><button @click="add">add</button></p> </div> <p><button οnclick="reduce()">reduce</button></p> <p><button οnclick="reduceonce()">reduceonce</button></p> <p><button οnclick="off()">关闭事件</button></p> </body> </html> <script> var app = new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++ } }, }) //在构造器 on 一直调用 once只能调用一次 app.$on('reduce',function(){ this.num--; console.log('执行了reduce方法') }) app.$once('reduceonce',function(){ this.num--; console.log('执行了reduceonce方法') }) function reduce(){ //emit 触发当前实例上的事件 app.$emit('reduce'); } function reduceonce(){ app.$emit('reduceonce'); } // $off 关闭事件 function off(){ app.$off('reduce'); console.log('关闭了reduce') } </script>
运行结果：
看完上述内容，你们对怎么在Vue中实例事件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
