利用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. JavaSE习题 第七章 常用实用类

    问答题 1.怎样实例化一个Calendar对象? Calendar ca=Calendar.getInstance(); 2.Calendar对象调用set(1949,9,1)设置的年月日分别是多少? ...

  2. 使用openpyxl实现excel文件的读取操作

    1.环境准备 python3环境.安装openpyxl模块 2.excel文件数据准备 3.为方便直接调用,本代码直接封装成类 from openpyxl import load_workbook c ...

  3. Eclispe中编辑xml配置文件时不会提示也不能自动调整格式

    创建了一个xml文件后,发现编辑起来和原来的那些有所不同,不会提示补全.也不能自动调整格式???woc? 哈哈哈哈哈,“我最恨你像个石头一样” 后来发现是编辑器被改了!!! 右键xml文件然后open ...

  4. 将矩阵数据转换为栅格图 filled.contour()

    require(grDevices) # for colours filled.contour(volcano, color = terrain.colors, asp = 1) # simple x ...

  5. leecode第一百二十一题(买卖股票的最佳时机)

    class Solution { public: int maxProfit(vector<int>& prices) { int len=prices.size(); ) ; v ...

  6. 《剑指offer》第四十四题(数字序列中某一位的数字)

    // 面试题44:数字序列中某一位的数字 // 题目:数字以0123456789101112131415…的格式序列化到一个字符序列中.在这 // 个序列中,第5位(从0开始计数)是5,第13位是1, ...

  7. 在docker 容器中安装命令

    apt-get update ##跟新 //vi apt install vim //weget apt install weget //yum apt install yum //ifconfig ...

  8. lua --- 点号 和 冒号

    冒号的作用:1.定义函数时,给函数添加隐藏的第一个参数 self2.调用函数时,默认把当前调用者作为第一个参数传递进去 如 a:b(c) 可以理解为 a.b(a, c) 以下是用点号的定义和调用函数的 ...

  9. 第 3 章 镜像 - 015 - 调试 Dockerfile

    如何 debug Dockerfile 通过 Dockerfile 构建镜像的过程 从 base 镜像运行一个容器 执行命令对容器做修改 执行类似 docker commit 的操作,生成一个新的镜像 ...

  10. delphi 条形码

    Delphi中打印条码的方法 导读: 1 通过菜单”Component”下的”Import ActiveX”将“Microsoft Access Barcode Control 9.0”控件引入.这个 ...