vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码:
父组件:
<parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; }
子组件通过props来接受数据
第一种方法
props: ['childCom']
第二种方法
props: { childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦 }
第三种方法
props: { childCom: { type: String, default: 'sichaoyun' } }
子组件与父组件通信
vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据,废话少说,上干货
子组件代码
<template> <div @click="open"></div> </template> methods: { open() { this.$emit('showbox','the msg'); //触发showbox方法,'the msg'为向父组件传递的数据 } }
父组件
<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法 methods: { toshow(msg) { this.msg = msg; } }
兄弟组件之间的通信
我们可以实例化一个vue实例,相当于一个第三方
let vm = new Vue(); //创建一个新实例
组件他哥
<div @click="ge"></div> methods: { ge() { vm.$emit('blur','sichaoyun'); //触发事件 } }
组件小弟接受大哥命令
<div></div> created() { vm.$on('blur', (arg) => { this.test= arg; // 接收 }); }
搞定!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通