子组件:

<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子组件给父组件传值的更多相关文章

  1. vue 子页面,向父页面 传值...

    子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. vue 关于子组件向父组件传值$emit触发无效问题

    先贴上代码 子组件代码 //子组件请求接口,用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'jso ...

  9. VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

    目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...

  10. vue2.0 子组件和父组件之间的传值(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

随机推荐

  1. KingbaseES数据库配置Hikari数据源

    Hikari是一个高性能的数据库连接池,它是Spring Boot 2.x中的默认数据源. 一.下载驱动 打开下面网址:选择对应平台的jdbc驱动程序. 人大金仓-成为世界卓越的数据库产品与服务提供商 ...

  2. [Unity3D] 使用LineRenderer实现尾迹与虚线效果

    Unity3D 使用LineRenderer绘制尾迹与虚线 1.添加LineRenderer组件 先创建一个3D对象,然后点击Add Component选项 搜索并添加LineRenderer组件 添 ...

  3. 8 JavaScript函数

    8 JavaScript函数 在JS中声明函数和python差不多. 也要有一个关键字顶在前面. python是def, 到了JS里换成了function, 只不过在JS中没有像python那么死板, ...

  4. #贪心#CF1054D Changing Array

    题目 给定 \(n\) 个 \(k\) 位二进制数,\(n\leq 2*10^5,k\leq 30\) 可以选择若干数将其所有二进制位取反, 最多可以有多少个区间的异或和不为 0 分析 考虑将区间异或 ...

  5. #平衡树#洛谷 1110 [ZJOI2007]报表统计

    题目 分析 最小值只需要开两棵平衡树,一棵维护所有元素,一棵维护相邻最小值, 对于全局最小值,对于每次插入查找前驱后继更新最小值即可, 相邻最小值,对于每个原数列的数维护它的开头和结尾是什么数, 然后 ...

  6. HMS Core Discovery第16期直播预告|与虎墩一起,玩转AI新“声”态

    [导读] 随着人工智能不断发展,机器学习技术也开始被广泛地应用到教育.金融.零售.交通.医疗等各个领域,给我们的生活带来巨大的便利.本期Discovery直播以<与虎墩一起,玩转AI新" ...

  7. redis 简单整理——Lua[十一]

    前言 简单介绍一下Lua. 正文 为了保证多条命令组合的原子性,Redis提供了简单的事务功能以及集 成Lua脚本来解决这个问题. 前面提及到pipline,也提及到pipline 并不是原子性的,如 ...

  8. 重新整理数据结构与算法(c#)—— 二叉树排序树补删除节点[二十二]

    前言 续前一章. 正文 删除节点规则: 1.假如删除的是叶子节点,让他的父节点,断开和它的联系. 2.如果删除节点右左子树或者右子树的话,那么应该这样. 如果删除节点是它的父节点的左节点,而删除节点有 ...

  9. 分布式文件存储-FastDFS

    1.1 FastDFS简介 1.1.1 FastDFS体系结构 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了 ...

  10. 上架即封神!3.6k Star 的开源游戏模拟器,Delta 冲上 App Store 免费榜

    一直以来,苹果设备的应用商店(App Store)都是禁止游戏模拟器上架,所以 iPhone/iPad 用户不能直接安装 GBA.红白机之类的模拟器应用,这也让想在 iPhone 上重温童年游戏机的机 ...