利用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. JVM（一）

    1 Java类加载器包括几种?它们之间的关系是怎么样的?双亲委派机制是什么意思?有什么好处? 启动Bootstrap类加载.扩展Extension类加载.系统System类加载. 类加载器也是Java ...

  2. php格式化数字输出number_format

    <?php $num = 4999.944444; $formattedNum = number_format($num).PHP_EOL; echo $formattedNum; $forma ...

  3. DEBUG(2)--函数的输入参数要做适当的检查

      今天在调试程序时发现,在单步运行的情况下,程序执行没有问题,但是直接运行就会出问题.出问题的代码如下 for(int col=0;col<=9;++col) { int killid=Pos ...

  4. bubbo调用Failed to invoke remote method异常解决

    bubbo调用服务异常: com.alibaba.dubbo.rpc.RpcException: Failed to invoke remote method: getPlanFlowInfo, pr ...

  5. Python pickle使用

    2019-01-15 10:04:32 用于序列化的两个模块 json:用于字符串和Python数据类型间进行转换 pickle: 用于python特有的类型和python的数据类型间进行转换 jso ...

  6. 雷林鹏分享：jQuery EasyUI 扩展

    jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editab ...

  7. 守护进程函数——内部的小范围try catch 增强了 while死循环执行的 可靠性

    void Watch()        {            try            {                LogHelper.WriteLog("WatchServi ...

  8. 20190104xlVBA_在课表里标记自己的课程

    Sub TagMyCourses() Const HEAD_ROW = 3 With ActiveSheet endrow = .Cells.Find("*", .Cells(1, ...

  9. 01Flask基础

    简介 Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的 ...

  10. 4.1.3 Euclid's Game (POJ 2348)

    Problem description: 以辗转相除法为基础,给定两个整数a和b,Stan和Ollie轮流从较大的数字中减去较小数字的倍数(整倍数),并且相减后的结果不能为零.Stan先手,在自己的回 ...