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

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