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. 【Codeforces 1031C】Cram Time

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 如果找到最大的n使得1+2+...+n<=a+b 然后第一天输出1,2.3,4....t1 这里1+2+..+t1<=a 这还远远 ...

  2. Python接口测试之unittest框架(五)

    Test-driven development(TDD)开发模式在今天已经不是什么新奇的事了,它的开发思维是在开发一个产品功能的时候,先 编写好该功能的测试代码,在编写开发比如,比如要写二个数相除的函 ...

  3. [luoguP2617] Dynamic Ranking(树状数组 套 主席树 + 离散化)

    传送门 BZOJ上是权限题,洛谷赞啊. 求区间 K 大数很简单. 但是如果修改某个数的话,那么就得把这个数及后面所建的主席树都更新一遍 nlogn,显然不行. 所以可以在外面套一个树状数组来优化,树状 ...

  4. codeforces 359A

    #include<stdio.h> #define N 60 int map[N][N]; int main() {  int n,m,i,j,flag;  while(scanf(&qu ...

  5. 营救(洛谷 P1396)

    题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈丰富的经验告诉她小 ...

  6. spring 邮件服务

    https://www.cnblogs.com/ityouknow/p/6823356.html https://www.cnblogs.com/nfcm/p/7843935.html

  7. NOIP 2010 乌龟棋

    P1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行 NN 个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第 NN 格是终点, ...

  8. NetworkManager的坑(如何让network manager不去管理网络端口)

    在CentOS上,有时你需要停止并禁用 NetworkManager.但这样做了之后,其实NetworkManager还在影响着你的端口. 比如你有端口配置如下: [root@compute02 ~] ...

  9. dstat用法;利用awk求dstat所有列每列的和;linux系统监控

    安装:yum install -y dstat dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一个全能系统信息统计工具.与sys ...

  10. 关于 TCP 并发连接的几个思考题与试验

    http://blog.csdn.net/solstice/article/details/6579232