父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息。

父组件:
<div><div style="background:#34495E;color: #fff; padding:20px"><p style="margin-bottom: 20px">这是父组件</p><div style="background:#E74C3C;color: #fff; padding:20px; margin-top:20px"><p>接受来自子组件的内容: </p><p style="margin-top:20px;background:#fff; color:#000; padding:5px; line-height:1.5;">{{hello}}</p></div></div><div style="background:#34495E;color: #fff; padding:20px; margin-top:20px"><p style="margin-bottom: 20px">这是子组件</p><musicsearch @trans="transContent" :pupu="hello" :info="info"></musicsearch></div></div>
export default {components: {musicsearch},data() {return {hello: '',info: ''}},methods: {transContent(msgs) {this.hello = msgs;this.info = msgs;}}
}

  

子组件:
<div><div style="margin-top:20px; background:#E74C3C; padding:10px;"><input type="text" ref="ipt" style="border:none; margin-top:10px; margin-bottom: 20px; border-radius:4px; width:90%; height:18px; padding:5px; line-height:18px; border:1px solid #fff"><button @click="sendVal()" style="margin-bottom: 20px; border:none; outline:none; border-radius:4px; height:28px; line-height:28px; background:#F1C40F; color:#fff;">向父组件发送内容按钮</button></div><div style="margin-top:20px; background:#E74C3C; padding:10px;"><button @click="click()" style=" margin-top:10px; border:none; outline:none; border-radius:4px; height:28px; line-height:28px; background:#F1C40F; color:#fff;">接受来自父组件的内容按钮</button><div style="margin-top:20px;background:#fff; color:#000; padding:5px; line-height:1.5;">{{msg}}</div></div></div>export default {name: 'girl-group',props: {info: ''},data() {return {msg: ''}},methods: {sendVal() {this.$emit('trans', this.$refs.ipt.value);//这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化click方法里的值就会跟着改变,调用click事件可看到信息},click() {this.msg = this.info;}}
}

  

  

  

  

转载于:https://www.cnblogs.com/kymming/p/7325119.html

Vue父子组件间的通信相关推荐

  1. Vue 父子组件间的通信

    前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...

  2. 【Vue父子组件间通信】

    Vue父子组件间通信 父子组件通信 父传子 (props) 子传父 (自定义事件) 完整代码 效果 父子组件通信 父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...

  3. vue 父子组件间通信

    前言 在vue项目中,封装组件,涉及到父子组件的传值,本文主要讲解父子组件之间传值的方法. 一.props / $emit 适用于父子组件通信,单向数据流,这种方法是 vue 组件的基础. 二.ref ...

  4. vue/父子组件之间的通信

    父子组件之间的通信 父组件绑定数据在组件上子组件props属性接收 父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...

  5. Vue父子组件间通信

    组件是vue.js最强大的功能之一,但组件之间的作用域是相互独立的,这就意味着不同组件之间的数据是无法相互引用的.为实现组件之间的通信,vue为我们提供了三种方式:prop.ref.emit. 首先创 ...

  6. vue父子组件之间的通信

    在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组 ...

  7. React组件通信-非父子组件间的通信

    文章目录 React非父子组件通信 小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信 在React中, 非父子组件传递是通过一个API ...

  8. [vue] 父子组件间传值

    环境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template><div><a-button type="primary ...

  9. vue兄弟组件间的通信(事件总线)

    一.场景描述 导航栏与地图展示区为两个兄弟组件,导航栏组件用到的所有数据都来源于地图区组件通过导航栏按钮切换,控制地图区域数据的变化 二.实现步骤 1. 首先两个组件中都引入全局事件总线 import ...

最新文章

  1. 现代软件工程 结对编程 (I) 三维棋类游戏
  2. OUYA游戏开发核心技术剖析大学霸内部资料
  3. Android分级部门选择界面(二)
  4. Kalileo中DiagramGroup布局
  5. SQL Server-流程控制 6,WaitFor 语句
  6. c++中类的默认构造函数,析构函数,拷贝构造函数
  7. 一篇价值过百万的日志
  8. efi文件错误服务器崩溃,电脑故障分析:Winload.efi文件丢失导致蓝屏的解决方法...
  9. 八数码问题简单解决办法
  10. win10 联想键盘快捷键关闭_Win10电脑不用鼠标怎么关机键盘与快捷键关机技巧
  11. 【解决】Jupyter Notebook 内核似乎挂掉了,它很快将自动重启。
  12. python下载博文中微博图床图片
  13. windows电脑重装系统步骤、cmd常用命令等
  14. Mantis 管理Bug
  15. Swift内存所有权宣言
  16. CCNA实验二十四 路由更新的安全
  17. 原创|5万字详谈大数据面试题,面试必备
  18. Ubuntu下的源码浏览器Opengrok搭建 并集成LDAP认证登陆
  19. 【linux创建用户启动tomcat】
  20. TM4C123-TivaWare中函数名与函数指针在ROM中的映射

热门文章

  1. [Github项目]基于PyTorch的深度学习网络模型实现
  2. 比拼浮点运算速度,超算排行榜是这样“算”出来的
  3. Apache Curator之分布式锁原理(二)
  4. 深度学习之Batch Normalization
  5. 自定义多列排序:C++/Java实现
  6. SQL Server 中索引的禁用与删除
  7. Android 屏幕灭屏亮屏广播,屏幕灭屏亮屏监听,广播实现按键监听
  8. 什么是eager loading
  9. 微信小程序 客服功能 客服消息
  10. ie6/7 position relative overflow