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>
