vue自定義事件子組件把數據傳出去

本文轉載自查看原文 2017-05-18 13:37 1602 Vue.js

使用 $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>

輸出結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 怎樣在 Vue 里面使用自定義事件將子組件的數據傳回給父組件? vue子組件的自定義事件 vue子組件的自定義事件 Vue 組件（三）父組件與子組件傳遞數據之自定義事件 Vue的自定義組件之間的數據傳遞 vue子組件使用自定義事件向父組件傳遞數據 vue $emit子組件傳出多個參數，如何在父組件中在接收所有參數的同時添加自定義參數 vue $emit子組件傳出多個參數，如何在父組件中在接收所有參數的同時添加自定義參數 vue $emit子組件傳出多個參數，如何在父組件中在接收所有參數的同時添加自定義參數微信小程序【組件】：自定義組件的數據傳遞【父組件 --- 子組件】數據傳遞★★★★★★★★★

vue自定義事件 子組件把數據傳出去

免責聲明！

vue自定義事件子組件把數據傳出去