vue自定義事件 子組件把數據傳出去
阿新 • • 發佈：2017-05-18
orm currency prop targe 保留 eth counter href mat
每個 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>
輸出結果：
vue自定義事件 子組件把數據傳出去