vue 组件之间如何通信
组件之间如何通信,组件之间不同的关系,有不同的通信方式。
(1)公用通信方式 :vuex
不论组件是什么关系,都可以使用vuex,vuex状态管理器,可以把共享公共的数据都存储在这里,里面也有改变数据的方法。
(2)父子组件通信方式: props/$emit 、$parent/$children 、provide/inject
(a)props/$emit:父组件通过props给子组件传数据,子组件通过$emit(事件名,参数)给父组件传新数据
//父组件 <template> <div> <child :message="mes" @postMessage="getMessage"></child> <div>{{mes}}</div> </div> </template> export default{ data(){ mes:"第一次消息" }, methods:{ // 接受子组件发起的$emit事件,传来的新数据 getMessage(val){ this.mes = val } } } // 子组件 <template> <div> <p>我是子组件,props中message的值:{{message}}</p> <button @click="change">改变props中的message</button> </div> </template> export default{ props:["message"], methods:{ change(){ this.$emit("postMessage","第二次消息") } } }
(b)$parent/$children:组件实例中有$parent、$children属性
(c)provide/inject:这个比较适合跨级的组件,比如祖父组件与孙组件(描述的好奇怪啊)这种。
//父(祖父)组件
export default {
name: "App",
data() {
return {
a: "123"
};
},
provide() {
return {
a: this.a,
b: "bb"
};
}
}
// 子组件
export default{
inject:['a','b'],
created(){
console.log(this.a,this.b) // 123 bb
}
}
(3)兄弟组件通信方式: bus
兄弟组件之间通信,通过创建一个新的vue实例,作为两者之间的桥梁,然后通过$emit 和 $on去触发接受事件。
ps:$on接受事件之后,记得在beforeDestory移除,即$off。
//首先创建一个文件BUS.js import Vue from 'vue'; export default new Vue; // 子组件A <template> <div> <div>我是子组件A:{{num}}</div> <button @click="add">点击加1</button> </div> </template> import BUS from "../common/BUS.js"; export default{ data(){ return { num:0 } }, methods:{ add(){ this.num+=1 BUS.$emit("getNum",this.num) } } } // 子组件B <template> <div> <div>我是子组件:{{num}}</div> </div> </template> import BUS from "../common/BUS.js"; export default{ data(){ return { num:0 } }, created(){ BUS.$on("getNum",val=>{ this.num = val }) }, beforeDestroy() { // 记得移除 BUS.$off("getNum") } } // 父组件 <templete> <div> <child-a></child-a> <child-b></child-b> </div> </templete>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了