Vue学习使用系列六【自定义事件子传父的方法实现】

小半 • 2022年12月21日下午9:50 • .NET • 阅读 212

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:测试效果

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/63980.html

Vue学习使用系列六【自定义事件子传父的方法实现】

相关推荐