Vue 父组件往子组件传递方法 

 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   <script src="./lib/vue-2.4.0.js"></script>
10 </head>
11 
12 <body>
13   <div id="app">
14     <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 
15       当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
16     <com2 @func123="show"></com2>
17   </div>
18 
19   <template id="tmpl">
20     <div>
21       <h1>这是子组件</h1>
22       <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
23     </div>
24   </template>
25 
26   <script>
27     // 定义了一个字面量类型的 组件模板对象
28     var com2 = {
29       template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
30       data() {
31         return {
32           sonmsg: '子组件中data中的数据'
33         }
34       },
35       methods: {
36         myclick() {
37           // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
38           //  emit 英文原意： 是触发，调用、发射的意思
39           // this.$emit('函数名称', 参数, 参数) func123是
40           this.$emit('func123', this.sonmsg)
41         }
42       }
43     }
44     // 创建 Vue 实例，得到 ViewModel
45     var vm = new Vue({
46       el: '#app',
47       data: {
48         datamsgFormSon: '父组件中的数据'
49       },
50       methods: {
51         show(data) {
52           alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
53           this.datamsgFormSon = data
54           alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
55         }
56       },
57       components: {
58         com2
59       }
60     });
61   </script>
62 </body>
63 
64 </html>

 

posted @ 2021-11-14 11:16  aixuexi666888  阅读(940)  评论(0)  编辑  收藏  举报