vue子组件给父组件传值
子组件:
<template>
<div class="app">
<input @click="sendMsg" type="button" value="给父组件传递值">
</div>
</template>
<script>
export default {
data () {
return {
//将msg传递给父组件
msg: "我是子组件的msg",
}
},
methods:{
sendMsg(){
//func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
this.$emit('func',this.msg)
}
}
}
</script>
子组件通过this.$emit()的方式将值传递给父组件
注意:这里的func是父组件中绑定的函数名
父组件:
<template>
<div class="app">
<child @func="getMsgFormSon"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
msgFormSon: "this is msg"
}
},
components:{
child,
},
methods:{
getMsgFormSon(data){
this.msgFormSon = data
console.log(this.msgFormSon)
}
}
}
</script>
好了,so easy!
vue子组件给父组件传值的更多相关文章
- vue 子页面,向父页面 传值...
子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- 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开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...
- vue 关于子组件向父组件传值$emit触发无效问题
先贴上代码 子组件代码 //子组件请求接口,用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'jso ...
- VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...
- vue2.0 子组件和父组件之间的传值(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
随机推荐
- KingbaseES数据库配置Hikari数据源
Hikari是一个高性能的数据库连接池,它是Spring Boot 2.x中的默认数据源. 一.下载驱动 打开下面网址:选择对应平台的jdbc驱动程序. 人大金仓-成为世界卓越的数据库产品与服务提供商 ...
- [Unity3D] 使用LineRenderer实现尾迹与虚线效果
Unity3D 使用LineRenderer绘制尾迹与虚线 1.添加LineRenderer组件 先创建一个3D对象,然后点击Add Component选项 搜索并添加LineRenderer组件 添 ...
- 8 JavaScript函数
8 JavaScript函数 在JS中声明函数和python差不多. 也要有一个关键字顶在前面. python是def, 到了JS里换成了function, 只不过在JS中没有像python那么死板, ...
- #贪心#CF1054D Changing Array
题目 给定 \(n\) 个 \(k\) 位二进制数,\(n\leq 2*10^5,k\leq 30\) 可以选择若干数将其所有二进制位取反, 最多可以有多少个区间的异或和不为 0 分析 考虑将区间异或 ...
- #平衡树#洛谷 1110 [ZJOI2007]报表统计
题目 分析 最小值只需要开两棵平衡树,一棵维护所有元素,一棵维护相邻最小值, 对于全局最小值,对于每次插入查找前驱后继更新最小值即可, 相邻最小值,对于每个原数列的数维护它的开头和结尾是什么数, 然后 ...
- HMS Core Discovery第16期直播预告|与虎墩一起,玩转AI新“声”态
[导读] 随着人工智能不断发展,机器学习技术也开始被广泛地应用到教育.金融.零售.交通.医疗等各个领域,给我们的生活带来巨大的便利.本期Discovery直播以<与虎墩一起,玩转AI新" ...
- redis 简单整理——Lua[十一]
前言 简单介绍一下Lua. 正文 为了保证多条命令组合的原子性,Redis提供了简单的事务功能以及集 成Lua脚本来解决这个问题. 前面提及到pipline,也提及到pipline 并不是原子性的,如 ...
- 重新整理数据结构与算法(c#)—— 二叉树排序树补删除节点[二十二]
前言 续前一章. 正文 删除节点规则: 1.假如删除的是叶子节点,让他的父节点,断开和它的联系. 2.如果删除节点右左子树或者右子树的话,那么应该这样. 如果删除节点是它的父节点的左节点,而删除节点有 ...
- 分布式文件存储-FastDFS
1.1 FastDFS简介 1.1.1 FastDFS体系结构 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了 ...
- 上架即封神!3.6k Star 的开源游戏模拟器,Delta 冲上 App Store 免费榜
一直以来,苹果设备的应用商店(App Store)都是禁止游戏模拟器上架,所以 iPhone/iPad 用户不能直接安装 GBA.红白机之类的模拟器应用,这也让想在 iPhone 上重温童年游戏机的机 ...