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

 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 组件传值-子组件通过事件调用向父组件传值

猜你喜欢

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