vue子组件向父组件传递参数过程分析
vue子组件向父组件传递参数过程分析
一、总结
一句话总结：
1、在这个过程中，【子组件和父组件中的方法都执行了一次】，而且是子组件方法先，父组件方法后：比如下面实例中用户先点击了myclick()方法，然后执行了父组件的show()方法
2、所以【子组件自定义方法可以向父组件传递数据】
3、所以也相当于【子组件方法调用了父组件的方法】
<div id="app"> <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --> <com2 @func123="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: '子组件中data中的数据' } }, methods: { myclick() { // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？ // emit 英文原意： 是触发，调用、发射的意思 // this.$emit('函数名称', 参数, 参数) func123是 this.$emit('func123', this.sonmsg) } } } // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { datamsgFormSon: '父组件中的数据' }, methods: { show(data) { alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon) this.datamsgFormSon = data alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon) } }, components: { com2 } }); </script>
二、vue子组件向父组件自定义传递参数过程分析
转自或参考：Vue 父组件往子组件传递方法
https://www.cnblogs.com/wanguofeng/p/11264358.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --> <com2 @func123="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: '子组件中data中的数据' } }, methods: { myclick() { // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？ // emit 英文原意： 是触发，调用、发射的意思 // this.$emit('函数名称', 参数, 参数) func123是 this.$emit('func123', this.sonmsg) } } } // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { datamsgFormSon: '父组件中的数据' }, methods: { show(data) { alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon) this.datamsgFormSon = data alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon) } }, components: { com2 } }); </script> </body> </html>
