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