首页 > 其他 > 详细

第六章 组件 64 组件传值-子组件通过事件调用向父组件传值

时间:2019-06-11 13:33:53      阅读:87      评论:0      收藏:0      [点我收藏+]

 

 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     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15     <!-- 父组件向子组件传递方法,使用的是时间绑定机制;v-on,当我们自定义了一个事件属性之后,那么,子组件就能够,通过某些方式,来调用传递进去的这个方法了-->
16     <!-- show(),先把调用结果传递给func。show,把方法的引用原封不动交给func去保存一份 -->
17     <com2 @func="show"></com2>      
18       </div>
19 
20     <template id="tmp1">
21         <div>
22           <h1>这是 子组件</h1>
23           <input type="button" value="这是子组件中的按钮-点击它,触发父组件传递过来的func方法" @click="myclick">
24         </div>        
25       </template>
26 
27       <script>
28       
29       //定义了一个字面量类型的组件模板对象
30       var com2={
31         template:#tmp1 ,//通过指定了一个Id,表示说,要去加载这个指定Id的template元素中的内容,当作组件的HTML结构
32         data(){
33           return{
34             sonmsg:{name:江小白,age:6}
35           }
36         },
37         methods:{
38           myclick(){
39             // 当点击子组件的按钮的时候,如何拿到父组件传递过来的func方法,并调用这个方法???
40            //emit  英文原意:是触发,调用、发射的意思
41             // this.$emit(‘func‘,123,456)
42             this.$emit(func,this.sonmsg)
43           }
44         }
45       }
46 
47 
48           //创建 Vue 实例,得到 ViewModel
49           var vm =  new Vue({
50               el:#app,
51         data:{
52           datamsgFormSon:null
53         },
54         methods:{
55           show(data){
56             // console.log(‘调用了父组件身上的show方法: --- ‘+data
57             // console.log(data);
58             this.datamsgFormSon=data
59           }
60         },
61         components:{
62           com2
63           // com2:com2
64         }
65           });
66       </script>
67   </body>
68 </html>

 

第六章 组件 64 组件传值-子组件通过事件调用向父组件传值

原文:https://www.cnblogs.com/songsongblue/p/11002406.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!