本文主要是介绍42. Vue组件传值-子组件通过事件调用向父组件传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
上一篇章讲解了使用props将父组件的值传递到子组件中，那么子组件如果反过来传递给父组件呢？
这就需要父组件传递事件方法，提供子组件调用，通过子组件调用父组件的函数，传入相关参数，来进行逆向传递。
而子组件如果想要调用父组件的函数，则需要使用emit方法。
官网介绍地址：https://cn.vuejs.org/v2/api/#vm-emit
原理基本说明：子组件向父组件传值
原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
-
父组件将方法的引用传递给子组件，其中，
getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称。<son @func="getMsg"></son> -
子组件内部通过
this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用。<div id="app"><!-- 引用父组件 --><son @func="getMsg"></son><!-- 组件模板定义 --><script type="x-template" id="son"><div><input type="button" value="向父组件传值" @click="sendMsg" /></div></script></div><script>// 子组件的定义方式Vue.component('son', {template: '#son', // 组件模板Idmethods: {sendMsg() { // 按钮的点击事件this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去}}});// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义alert(val);}}});</script>
具体示例
下面逐步写一个子组件通过事件调用向父组件传值的示例。
需要以下步骤：
- 首页编写子组件与父组件在页面展示
- 编写父组件一个示例方法
show，使用v-on绑定到子组件中 - 在子组件中使用
emit调用绑定下来的父组件方法，测试能否调用 - 在子组件中使用
emit传递参数到父组件中
基本上步骤大致是这样，下面来逐步写写看。
1.首先写一个子组件以及父组件的展示内容
浏览器显示如下：
2.编写父组件一个示例方法show，使用v-on绑定到子组件中
3.在子组件中使用emit调用绑定下来的父组件方法，测试能否调用
4.在子组件中使用emit传递参数到父组件中
好了，现在在浏览器点击来看看打印的信息，如下：
那么从上面，我们看到了子组件的参数已经传递父组件中，那么可以思考一下，父组件接收到了参数之后，是否还可以传递到父组件的data参数么？
5.在父组件设置data参数，接收子组件传递过来的参数
在浏览器执行如下：
好了，到这里基本已经实现了子组件往父组件传值的整体过程了。
更多精彩原创Devops文章，快来关注我的Devops社群吧：
这篇关于42. Vue组件传值-子组件通过事件调用向父组件传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
