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 =
false new 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里面的数据了

<>总结：这就是我总结的组件件通信的四种常用的方法，可能会有写的不好的地方，我们一起努力！~

• « 上一篇：StarRocks测试 - StarRocks vs Impala 性能对比
• » 下一篇：vue3响应式数据的相关函数