1.子组件$emit()触发,父组件$on()监听

子组件:
<template>
<div class="hello">
<button v-on:click="onClickMe">telltofather</button>
</div>
</template> <script>
export default {
methods: {
onClickMe () {
this.$emit('childClick',this.msg);//将this.msg传给父组件
}
}
}
</script>

父组件:

<template>
<div id="app">
<p>child tell me: {{childWords}}</p>
<child v-on:childClick='listenToMyBoy'>
</child>
</div>
</template > <script> import child from './components/child';
export default {
components: {
child
},
data () {
return {
childWords: ''
}
},
methods: {
listenToMyBoy (msg) {
this.childWords = msg;//获取到子组件传过来的值msg
}
}
}
</script>

vue中子组件向父组件传值的更多相关文章

  1. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  2. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

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

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

  4. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件

    (标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...

  6. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  7. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  8. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  9. 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)

    (本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...

随机推荐

  1. MySQL MGR源码分析2 - 从start group_replication看MGR代码框架

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 上一篇我们从方案层面讲解了MGR的成员管理和故障恢复.本篇从源码层面捋一捋,通过本篇介绍,除了能够了解如何将 ...

  2. Android二级缓存之物理存储介质上的缓存DiskLruCache

     Android二级缓存之物理存储介质上的缓存DiskLruCache Android DiskLruCache属于物理性质的缓存,相较于LruCache缓存,则DiskLruCache属于And ...

  3. [luoguP1097] 统计数字(水)

    传送门 这么水的题,也只有提高组第一题了吧 代码 #include <cstdio> #include <iostream> #include <algorithm> ...

  4. [luoguP1970] 花匠(DP)

    传送门 n2 过不了惨啊 70分做法 f[i][0] 表示第 i 个作为高的,的最优解 f[i][0] 表示第 i 个作为低的,的最优解 (且第 i 个一定选) 那么 f[i+1][1]=max(f[ ...

  5. bzoj4553 [Tjoi2016&Heoi2016]序列 树状数组(区间最大值)+cqd

    [Tjoi2016&Heoi2016]序列 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1006  Solved: 464[Submit][ ...

  6. struts2开发action 的三种方法以及通配符、路径匹配原则、常量

    struts2开发action 的三种方法 1.继承ActionSupport public class UserAction extends ActionSupport { // Action中业务 ...

  7. 使用XML定义组件样式

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content& ...

  8. POJ 2411_Mondriaan's Dream

    题意: 用1*2和2*1的方块将给定长宽的矩形填满.问有多少种放法,对称的算两种. 分析: 状态压缩dp 首先用0表示前一行没有竖块占用这个位置,而1表示该位置和他上方的位置放了一个竖块,从而压缩状态 ...

  9. Memcached集群之通过Repcached实现主从复制(待实践)

    暂时了解有这东西,不搭建了. Mamcached可以通过Repcached实现主从复制.有以下优缺点: 优点: 1.能够实现Cache的冗余功能 2.主从之间可以互相读写(亮点) 参考: http:/ ...

  10. fetch各种报跨域错误,数据无法获取的解决方案

    1.介绍 fetch 提供了一个获取资源的接口 (包括跨域). fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 ...