42. Vue组件传值-子组件通过事件调用向父组件传值

前言

上一篇章讲解了使用props将父组件的值传递到子组件中，那么子组件如果反过来传递给父组件呢？

这就需要父组件传递事件方法，提供子组件调用，通过子组件调用父组件的函数，传入相关参数，来进行逆向传递。

而子组件如果想要调用父组件的函数，则需要使用emit方法。

官网介绍地址：https://cn.vuejs.org/v2/api/#vm-emit

原理基本说明：子组件向父组件传值

1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；

2. 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称。

   <son @func="getMsg"></son>

3. 子组件内部通过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', // 组件模板Id
         methods: {
           sendMsg() { // 按钮的点击事件
             this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
           }
         }
       });
   
       // 创建 Vue 实例，得到 ViewModel
       var vm = new Vue({
         el: '#app',
         data: {},
         methods: {
           getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
             alert(val);
           }
         }
       });
     </script>

具体示例

下面逐步写一个子组件通过事件调用向父组件传值的示例。

需要以下步骤：

• 首页编写子组件与父组件在页面展示
• 编写父组件一个示例方法show，使用v-on绑定到子组件中
• 在子组件中使用emit调用绑定下来的父组件方法，测试能否调用
• 在子组件中使用emit传递参数到父组件中

基本上步骤大致是这样，下面来逐步写写看。

1.首先写一个子组件以及父组件的展示内容

image-20200211114459261

浏览器显示如下：

image-20200211121058687

2.编写父组件一个示例方法show，使用v-on绑定到子组件中

image-20200211230028054

3.在子组件中使用emit调用绑定下来的父组件方法，测试能否调用

image-20200211230331172

4.在子组件中使用emit传递参数到父组件中

image-20200211230611997

好了，现在在浏览器点击来看看打印的信息，如下：

image-20200211230827734

那么从上面，我们看到了子组件的参数已经传递父组件中，那么可以思考一下，父组件接收到了参数之后，是否还可以传递到父组件的data参数么？

5.在父组件设置data参数，接收子组件传递过来的参数

image-20200211231222466

在浏览器执行如下：

image-20200211231331832

image-20200211231434985

好了，到这里基本已经实现了子组件往父组件传值的整体过程了。

更多精彩原创Devops文章，快来关注我的Devops社群吧：