利用vm.$emit

1、在父组件中引用子组件

<child  @from-child-msg="listenChildMsg"></child >

2、子组件中使用$emit发送事件

this.$emit('from-child-msg', '这是子组件传递的消息');

demo

<!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>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        input, select {

            height: 30px;

        }

    </style>

</head>

<body>

    <div id="app">

        <child value="name" @msg-from-child="getMsgFromChild"></child>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>

    <script>

        Vue.component('child', {

            data: function () {

                return {

                    val: this.value

                }

            },

            props: ['value'],

            methods: {

                handleClick () {

                    this.$emit('msg-from-child', this.val)

                }

            },

            template: `

                <div><input type="text" v-model="val"><button type="button" @click="handleClick">确定</button></div>

            `

        })

        new Vue ({

            el: '#app',

            data: {

            },

            methods: {

                getMsgFromChild (v) {

                    alert('msg: ' + v)

                }

            }

        })

    </script>

</body>

</html>

vue2.x 父组件监听子组件事件并传回信息的更多相关文章

  1. 【Angular】父组件监听子组件事件(传参)

    Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目

  2. vue中父组件如何监听子组件值的变化

    vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...

  3. vue watch 可以监听子组件props里面属性的改变

    子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');

  4. vue 监听子组件事件及组件上使用v-model

  5. js监听页面copy事件添加版权信息

    个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...

  6. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  7. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  8. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  9. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

随机推荐

  1. String和常量池

    1.Java 会确保一个字符串常量只有一个拷贝 2.用new String() 创建的字符串不是常量,不能在编译期就确定,所以new String() 创建的字符串不放入常量池中,它们有自己的地址空间 ...

  2. Bootstrap 4正式发布还有意义吗？

    历经三年开发,前端框架Bootstrap 4正式发布了.然而今天的Web世界已经和当初Mark Otto发布Bootstrap时的情况大为不同,一些开发者由此质疑它的更新是否还有意义. V4版本的主要 ...

  3. css无定宽水平居中

    转载:http://www.cnblogs.com/jogen/p/5213566.html 这个博客的菜单ui还是棒棒的. 方法一 思路:显示设置父元素为:table,子元素为:cell-table ...

  4. app和bootloader跳转 MSP与PSP

    1.不要把跳转函数放在中断中,如此导致在跳转后的app或者bootloder都是在中断状态,只要你一开启该中断,就可能出现硬件中断了 2.如果你的APP使用了ucos系统,在跳转函数中还需要增加__s ...

  5. top 内存mem的used很高，或者100%

    top 内存mem的used很高,或者100% Linux服务器运行一段时间后,由于其内存管理机制,会将暂时不用的内存转为buff/cache,这样在程序使用到这一部分数据时,能够很快的取出,从而提高 ...

  6. WPF打印涉及到的关键类

    DocumentViewer--->FixedDocument----> PageContent  ---->FixedPage

  7. Android中SharedPerforences的简单使用示例 --Android基础

    SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态,Activity暂停时,将此activity的状态保存到SharedP ...

  8. hdu-5985 概率DP

    http://acm.hdu.edu.cn/showproblem.php?pid=5985 作为队里负责动态规划的同学,做不出来好无奈啊.思考了一个下午,最好还是参考了别人的思想才写出来,数学啊!! ...

  9. 4.2 面向对象分析(二) CRC方法标识概念类

    CRC  又称为CRC索引卡片:CRC card  每张卡片代表一个类 Each card represents one class  每张卡片上写出这个类承担的职责.与其合作交互的其他类名   ...

  10. 4.1.4 Nim

    Problem description: 有n堆石子,每堆各有ai颗石子.A和B轮流从非空的石子堆中取走至少一颗石子.A先取,取光所有石子的一方获胜.当双方都采用最佳策略时,谁会获胜? 1<=n ...