首页 > 代码库 > vue自定义事件 子组件把数据传出去

vue自定义事件 子组件把数据传出去

每个 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:http://www.mamicode.com/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>

输出结果:

技术分享

 

vue自定义事件 子组件把数据传出去