vue组件间常用的几种通信方式
第一种方式：props
这种通信方式适用与父向子传递数据
//父组件
<template><div class="father"><span>我是父组件</span><br><StudentName :msg="name"></StudentName></div>
</template><script>import StudentName from "./components/StudentName.vue"export default {components:{StudentName},data(){return{name:"李四"}}}
</script>
<style scoped>
.father{background: green;height: 50px;
}
</style>
这样我们的子组件就能拿到父组件传递过来的数据，并把它渲染上页面：
// 子组件
<template><div class="child">我是子组件我是父组件传递过来的数据：{{msg}}</div>
</template><script>export default {props:{msg:String},data(){return {}}}
</script><style scoped>
.child{background: red;
}
</style>
页面显示：
第二种方式：$emit和$on
这种方式适合于任意组件件通信，这里我们演示兄弟之间通信
// 父组件
<template><div class="father"><span>我是父组件</span><br><StudentName></StudentName><PersonName></PersonName> </div>
</template><script>import StudentName from "./components/StudentName.vue"import PersonName from "./components/PersonName.vue"export default {components:{StudentName,PersonName},data(){return{name:"李四",}}
}
</script>
<style scoped>
.father{background: green;height: 100px;
}
</style>
子组件1号
<template><div class="child">我是子组件1号<!-- 这里写上要发送数据的方法 --><button @click="send">给组件2号发送数据</button></div>
</template><script>export default {data(){return {name:'你好兄弟，我来找你玩了'}},methods:{send(){// 这里在$root身上绑定一个方法，等着兄弟来触发，然后传值给他this.$root.$emit("name",this.name);}}}
</script><style scoped>.child{background: red;}
</style>
子组件2号
<template><div class="chi">我是子组件2号这是组件1号发过来的数据:{{msg}}</div>
</template><script>export default {data(){return {msg:""}},mounted(){// 触发子组件1号绑定的方法，获得子组件1号传的值this.$root.$on('name',data =>{this.msg = data})}}
</script><style scoped>
.chi{background: orange;
}
</style>
效果
第三种方法：全局事件总线
这种方法也可以实现任意组件间通信，具体操作如下
首先安装全局事件总线：
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线，所有组件都能看到$bus}
}).$mount('#app')// 父组件
<template><div class="father"><span>我是父组件</span><br><StudentName></StudentName><PersonName></PersonName> </div>
</template><script>
import StudentName from "./components/StudentName.vue"
import PersonName from "./components/PersonName.vue"
export default {components:{StudentName,PersonName},data(){return{name:"李四",}}}
</script>
<style scoped>
.father{background: green;height: 100px;
}
</style>
// 子组件1号
<template><div class="child">我是子组件1号<!-- --><button @click="send">给组件2号发送数据</button></div>
</template><script>export default {data(){return {name:'我是组件1号'}},methods:{send(){this.$bus.$emit("name",this.name);}}}
</script><style scoped>.child{background: red;}
</style>
// 子组件2号
<template><div class="chi">我是子组件2号这是组件1号发过来的数据:{{msg}}</div>
</template><script>export default {data(){return {msg:""}},mounted(){this.$bus.$on('name',data =>{this.msg = data})}}
</script><style scoped>
.chi{background: orange;
}
</style>
效果
第四种方法：vuex
什么是vuex？
用官网的话说：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
本质：就是帮助我们管理我们的公共数据，任何组件都可以访问得到这些数据
下面我们来演示一下vuex得用法：
// 安装vuex
npm i vuex
在src目录下建立一个store
然后新建一个index.js，用来写我们vuex里面得代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//准备state——用于存储数据
const state = {msg:''
}//准备mutations——用于操作数据（state）
const mutations={send(state,value){state.msg = value}
}
//创建并暴露store
export default new Vuex.Store({mutations,state,
})
接下来就是来使用我们得vuex，第一步先在main.js引入我们写好得store文件
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false
import store from './store'new Vue({render: h => h(App),store,beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线，所有组件都能看到$bus}
}).$mount('#app')第二步，使用我们的store
// 父组件
<template><div class="father"><span>我是父组件</span><br><StudentName></StudentName><PersonName></PersonName> </div>
</template><script>
import StudentName from "./components/StudentName.vue"
import PersonName from "./components/PersonName.vue"
export default {components:{StudentName,PersonName},data(){return{name:"李四",}}}
</script>
<style scoped>
.father{background: green;height: 100px;
}
</style>
<template><div class="child">我是子组件1号<!-- --><button @click="send">保存数据进vuex中</button></div>
</template><script>export default {data(){return {name:'我是组件1号'}},methods:{send(){// 使用commit方法来调用我们store里面的存入数据的方法this.$store.commit("send",this.name)}}}
</script><style scoped>.child{background: red;}
</style>
// 子组件2
<template><div class="chi">我是子组件2号<!-- 直接可以使用this.$store.state.msg来读取子组件1存入state里面的数据 -->这是组件1号发过来的数据:{{this.$store.state.msg}}</div>
</template><script>export default {data(){return {}},mounted(){}}
</script><style scoped>
.chi{background: orange;
}
</style>
效果
这样子组件2，就能访问到子组件1保存进vuex里面的数据了
总结：这就是我总结的组件件通信的四种常用的方法，可能会有写的不好的地方，我们一起努力！~
vue组件间常用的几种通信方式相关推荐
- Vue组件间通信的几种方式
引入 用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用 一般来说,组件之间可以有几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系 ...
- Vue组件间常用的通信方式总结
在使用 vue-cli 创建的 vue 项目中进行组件间的通信,以下是三种常用的组件间通信的方式总结. 1.父组件向子组件传递数据----------------------------> 通过 ...
- vue组件间通信的13种方式
前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...
- 深入浅出，带你看懂Vue组件间通信的8种方案
前言 Vue种组件通信的情况有多种,总结有以下4种情况: 父子组件间通信 兄弟组件间通信 祖孙后代间通信 无关系组件间通信 8种解决方案 通过 props 传递 通过 $emit 触发自定义事件 使用 ...
- Vue组件间通信的8种方式
1.常用的父子组件通讯方式:props,emit 父组件传入属性,子组件通过props来接收,在子组件中就可以用this.xxx方式使用. 子组件通过$emit(事件名,参数)向外弹出一个自定义事件, ...
- vue组件间传值的几种方法
一丶父子组件传值 先在父组件中给子组件的自定义属性绑定一个 父组件的变量 <template class="father"><child :自定义属性名=&quo ...
- Vue 组件间通信几种方式（完整版）
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
- vue组件间通信六种方式（完整版）
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
- vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
最新文章
- 文件系统与NoSQL分布式存储技术对比
- 利用 Arthas 解决启动 StandbyNameNode 加载 EditLog 慢的问题
- Elasticsearch Transient与Persistent的区别
- project不显示里程碑标志_3万台！纽荷兰大方捆打捆机再创全新里程碑
- vue 报错 ：属性undefined（页面成功渲染）
- ios 获取最后一个cell_ios – UICollectionView estimatedItemSize – 最后一个单元格未对齐...
- R语言进行的变量相关性显著性检验
- android api 和版本对应表汇总
- surface屏幕自动调节亮度无法关闭
- duration java_Java Duration类| 带示例的multipliedBy（）方法
- 【山东seo】-淄博孔祥永seo技术分享博客
- Spring Doc OpenAPI3.0 抛弃SpringFox拥抱SpringDoc
- MD5加密（MD5Util ）
- Mysql高级-应用优化,查询缓存优化，锁
- 关于SuperSlide插件的使用
- 计算机科学引论试题,内工大计算机科学引论在线测试题.pdf
- 「高效程序员的修炼」代码版本管理工具 Git 用起来 01 Git 基础
- mac 浏览器解决跨域问题
- ZUI易入门Android之Bitmap(一)
- WEB前端学习课程推荐