40. 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.首先写一个子组件以及父组件的展示内容

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211114459261

浏览器显示如下:

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211121058687

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

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211230028054

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

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211230331172

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

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211230611997

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

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211230827734

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

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

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211231222466

在浏览器执行如下:

40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211231331832
40. Vue组件传值-子组件通过事件调用向父组件传值
image-20200211231434985

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

交流QQ群:


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


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



点击下面,查看更多Vue系列文章

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




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


原文始发于微信公众号(海洋的渔夫):40. Vue组件传值-子组件通过事件调用向父组件传值

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/32487.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!