W~C停用

导航

Vue组件之间的通信(子传父)

源码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <title>Document</title>
 9 </head>
10 
11 <body>
12   <!--父组件模版-->
13   <div id='content'>
14     <cpn @itemclick="itemClick"></cpn>
15   </div>
16 
17   <!--子组件模版-->
18   <template id="myCpn">
19     <div>
20       <button v-for="item in classification" @click="itemclick(item)">{{item.name}}</button>
21     </div>
22   </template>
23 
24   <script src='../Vue/vue.js'></script>
25   <script>
26     //子组件
27     const cpn = {
28       template: "#myCpn",
29       data() {
30         return {
31           classification: [
32             { id: "aa", name: "数码电脑" },
33             { id: "bb", name: "情趣计生" },
34             { id: "cc", name: "服装鞋袜" },
35             { id: "dd", name: "食品安全" },
36             { id: "ee", name: "生鲜水果" },
37           ],
38         };
39       },
40       methods: {
41         itemclick:function(item){
42           this.$emit("itemclick",item);
43         },
44       },
45       props: {
46 
47       },
48     };
49     //父组件
50     const content = new Vue({
51       el: '#content',
52       data: {
53 
54       },
55       methods: {
56         itemClick:(item)=>{
57           console.log(item);
58         },
59       },
60       components: {
61         cpn
62       }
63     });
64   </script>
65 </body>
66 
67 </html>

说明

1、子组件使用$emit发射事件,后面可以跟一个参数,如图

2、父组件中接收事件,默认接收子组件传递过来的参数,所以当需要接收子组件传递过来的参数时,通常不用写括弧。如图

posted on 2021-02-11 01:37  W~C停用  阅读(44)  评论(0编辑  收藏  举报