前言

上一篇章讲解了使用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社群吧:

Logo

前往低代码交流专区

更多推荐