自定义事件
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义事件</title> </head> <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> <!-- //我们看到这里放了2个button-counter组件,他们是互相独立的。这里我们调用了v-on:increment="incrementTotal"侦听,它侦听到组件内部事件后将会执行父级实例的incrementTotal方法。 --> <!-- </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) //组件里我们看到定义了一个计数器,还有一个计数器方法increment,模板中有一个点击事件触发increment。 //最关键的是this.$emit('increment'),我们看到在increment方法中定义了一个increment事件,这个事件将会传到组件外部乃至上级。 </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义事件</title> </head> <body> <div id="v-model-example"> <p>{{ message }}</p> <my-input label='请写入' v-bind:value="message" v-on:input="message = arguments[0]"></my-input> <!-- = arguments[0]相当于v-model="message" 绑定message 使p标签内容和input同步--> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('my-input', { template: '\ <div class="form-group">\ <label v-bind:for="randomId">{{label}}:</label>\ <input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput">\ </div>\ ', props: ['value', 'label'], data: function () { return { randomId: 'input-' + Math.random() //randomId 为 input+一个随机数 } }, methods: { onInput: function (event) { this.$emit('input', event.target.value) //获取当前触发对象的值 } }, }) new Vue({ el: '#v-model-example', data: { message: 'hello', } }) </script> <!-- 侦听事件使用 $on(eventName) 定义和触发事件使用 $emit(eventName) --> </html>
二次视频学习:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例事件</title> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> </head> </head> <body> <div id="app"> <p>{{num}}</p> <p><button @click="add">add</button></p> </div> <p><button onclick="reduce()">jian</button></p> <p><button onclick="reduceOnce()">jian</button></p> <p><button onclick="off()">off</button></p> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ num:1, }, methods:{ add:function(){ this.num++; } } }); app.$on('reduce',function(){ //监听当前实例上的自定义事件。 $on在构造器外面添加事件 接收两个参数,第一个是调用时的事件名称,第二个是一个匿名方法 如果按钮在作用域外部,可以用$emit 执行 console.log('执行了reduce方法'); this.num--; }); app.$once('reduceOnceaaa',function(){ //$once 执行一次的事件 console.log('只执行一次的方法'); this.num--; }) function reduce(){ app.$emit('reduce'); //触发当前实例上的事件。附加参数都会传给监听器回调。 调用上面定义的$on } function reduceOnce(){ //执行一次的事件 app.$emit('reduceOnceaaa');//运行上面定义的 } function off(){ //关闭事件 app.$off('reduce'); // } // </script> </html>