1：code
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="../assets/vue.js"></script> 9 </head> 10 11 <body> 12 <div id="app"> 13 <div> 14 <p>父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！</p> 15 <p>我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：</p> 16 <p>使用 $on(eventName) 监听事件</p> 17 <p>使用 $emit(eventName) 触发事件</p> 18 <p>另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。</p> 19 <p>以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。</p> 20 </div> 21 <hr> 22 <p>父组件的Total值：{{total}} 需要加上 v-on:</p> 23 <childtoparant v-on:add_number="addparant_upnumber"></childtoparant> 24 </div> 25 <script> 26 Vue.component("childtoparant", { 27 template: `<button v-on:click="addupnumber">{{count}}</button>`, //click子组件自己的事件 28 data: function() { 29 return { 30 count: 0 31 } 32 }, 33 methods: { 34 addupnumber: function() { 35 this.count += 1; 36 this.$emit('add_number'); //定义一个事件的名称，方便触发 37 } 38 } 39 }) 40 new Vue({ 41 el: "#app", 42 data: { 43 total: 0 44 }, 45 methods: { 46 addparant_upnumber: function() { 47 this.total += 1; 48 } 49 } 50 }) 51 </script> 52 </body> 53 54 </html>
2:测试效果
