利用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. [原][源码][tinyxml][opencv]按照规格剪切所有的图片

    源码: #include <iostream> #include <fstream> #include <opencv2/core/core.hpp> #inclu ...

  2. 力扣（LeetCode）965. 单值二叉树

    如果二叉树每个节点都具有相同的值,那么该二叉树就是单值二叉树. 只有给定的树是单值二叉树时,才返回 true:否则返回 false. 思路 递归 java版 /** * Definition for ...

  3. 使用Qss设置QT程序界面的样式和皮肤

    1         使用Qss设置QT程序界面的样式和皮肤 1.1  Qss的功能 Qt程序界面中控件的背景图片.大小.字体颜色.字体类型.按钮状态变化等属性可以通过Qss文件来设置,美化UI界面.实 ...

  4. spring cloud: zuul(五): prefix访问前缀, ignoredServices粗粒度访问， yml不起作用

    路由的前缀 - 问题 zuul.prefix: 我们可以指定一个全局的前缀 strip-prefix: 是否将这个代理前缀去掉 zuul: prefix: /ecom 我的eureka:http:// ...

  5. centos7: php7.2.9安装配置

    下载php http://cn2.php.net/distributions/php-7.2.9.tar.gz 解压到: /usr/local/src/ 接下来进行参数配置,配置前如果没有libxml ...

  6. LeetCode--268--缺失数字

    问题描述: 给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 1: 输入: [3,0,1] 输出: 2 示例 2: 输入: [9 ...

  7. Windows 上安装 Scala

    在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了. 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法. 接下来,我们可以从 S ...

  8. java.io.Serializable中serialVersionUID的作用

    把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存放在一个文件中: 2) 在网 ...

  9. unitest 测试集 实例

    -->baidy.py #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.by import B ...

  10. Two Melodies CodeForces - 813D (DP,技巧)

    https://codeforces.com/problemset/problem/813/D dp[i][j] = 一条链以i结尾, 另一条链以j结尾的最大值 关键要保证转移时两条链不能相交 #in ...