$on 在构造器外部添加事件。 $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。 如果按钮在作用域外部,可以利用$emit来执行。
html
<div id="app"> <span>{{message}}</span> <button @click="add()">+1</button> </div> <p><button onclick="reduce()">减少</button></p> <p><button onclick="reduceOnce()">执行一次减少</button></p> <p><button onclick="off()">关闭</button></p>
js
var vm = new Vue({ el:"#app", data:{ message:1 }, methods:{ add:function(){ this.message++ } } }) // 实例事件 vm.$on(‘reduce‘,function(){ this.message-- }) //只使用一次的实例方法 vm.$once(‘reduceOnce‘,function(){ this.num--; }) // 关闭事件 function off(){ vm.$off(‘reduce‘); } // 外部调用内部事件 function reduce(){ vm.$emit(‘reduce‘) } function reduceOnce(){ vm.$emit(‘reduceOnce‘); }
时间: 2024-10-25 19:20:13