vue中子组件向父组件传值
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中子组件向父组件传值的更多相关文章
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件
(标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...
随机推荐
- sqlite3 新建数据库的过程
有些东西,很简单,不过有坑,就变复杂了.我先说最简单的方法,新建一个空的txt文档,然后把后缀改为db就可以了.-_-蛋疼,其实一开始我是不知道的,也是后来成功新建db后发现db为0kb才大胆地做了这 ...
- BNUOJ 1268 PIGS
PIGS Time Limit: 1000ms Memory Limit: 10000KB This problem will be judged on PKU. Original ID: 11496 ...
- spark streaming基于Kafka的开发
spark streaming使用Kafka数据源进行数据处理,本文侧重讲述实践使用. 一.基于receiver的方式 在使用receiver的时候,如果receiver和partition分配不当, ...
- 【KMP+最小循环节】F. Cyclic Nacklace
https://www.bnuoj.com/v3/contest_show.php?cid=9147#problem/F [题意] 给定一个字符串,问在字符串后最少添加多少个字母,得到的新字符串能是前 ...
- 共享一个NOI用过的vimrc [rc][vimrc]
set nocp set nu set ru set noet set ai set cin set mouse =a set mp=g++\ %\ -o\ %<\ -g\ -Wall\ -Ws ...
- JQuery判断radio是否选中并获取选中值的示例代码
这篇文章主要介绍了JQuery判断radio是否选中并获取选中值的方法,代码很简单,但很实用,需要的朋友可以参考下 其他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 ? 1 ...
- csu - 1536: Bit String Reordering (模拟)
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1536 不知道为何怎么写都写不对. 这题可以模拟. 虽然题目保证一定可以从原串变成目标串,但是不一定 ...
- 洛谷 P1404 平均数
P1404 平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来n ...
- substring详细用法,截取不行就用替换
SUBSTRING 返回字符.binary.text 或 image 表达式的一部分.有关可与该函数一起使用的有效 Microsoft® SQL ...
- crontab not running
there are mutliple ways to describle this issue 1. crontab not running 2. crontab not running and no ...