每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
1、使用v-on绑定自定义事件
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript" src="vue.js"></script>
7 </head>
8 <body>
9 <div id="counter-event-example">
10 <p>{{ total }}</p>
11 <button-counter v-on:increment="incrementTotal"></button-counter>
12 <button-counter v-on:increment="incrementTotal"></button-counter>
13 </div>
14 </body>
15 <script>
16 Vue.component(‘button-counter‘, {
17 template: ‘<button v-on:click="increment">{{ counter }}</button>‘,
18 data: function () {
19 return {
20 counter: 0
21 }
22 },
23 methods: {
24 increment: function () {
25 this.counter += 1
26 this.$emit(‘increment‘)
27 }
28 }
29 })
30 new Vue({
31 el: ‘#counter-event-example‘,
32 data: {
33 total: 0
34 },
35 methods: {
36 incrementTotal: function () {
37 this.total += 1
38 }
39 }
40 })
41 </script>
42 </html>
输出结果：
2、使用自定义事件的表单输入组件
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script tyep="text/javascript" src="vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <p>{{price}}</p>
11 <currency-input v-model="price"></currency-input>
12 </div>
13 </body>
14 <script>
15 Vue.component(‘currency-input‘, {
16 template: ‘<span>$ <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" ></span> ‘,
17 props: [‘value‘],
18 methods: {
19 // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
20 updateValue: function (value) {
21 var formattedValue = value
22 // 删除两侧的空格符
23 .trim()
24 // 保留 2 小数位
25 .slice(0, value.indexOf(‘.‘) + 3)
26 // 如果值不统一，手动覆盖以保持一致
27 if (formattedValue !== value) {
28 this.$refs.input.value = formattedValue
29 }
30 // 通过 input 事件发出数值
31 this.$emit(‘input‘, Number(formattedValue))
32 }
33 }
34 })
35
36 var price
37 new Vue({
38 el:‘#app‘,
39 data:{
40 price:‘1‘
41 }
42
43 })
44 </script>
45 </html>
输出结果：
时间： 2024-08-02 23:07:11